如何通过Axios GET请求获取API中指定userID的购物车数据

实现方式分为两种，你可以根据自己的实际情况选择： #

方案1：接口侧过滤（推荐，性能更好） #

你之前拼接的请求路径不符合常规接口的参数传递规则，改成通过查询参数传递过滤条件即可，后端接口适配后可直接返回符合条件的数据，减少不必要的传输：
请求代码修改为：

axios.get("https://localhost:3000/api/carts?userID=3")

适配后前端拿到的res.data就已经是userID为3的购物车数据，不需要额外处理。

方案2：前端侧过滤（无需修改后端代码，适合临时调试） #

如果暂时无法调整后端接口，可在前端拿到全量数据后过滤出符合条件的条目，修改获取数据的逻辑如下：

const [myCart, setMyCart] = useState([])

useEffect(() => {
    axios
      .get("https://localhost:3000/api/carts/")
      .then((res) => {
        // 过滤出userID等于3的条目
        const targetCart = res.data.filter(item => item.userID === 3)
        setMyCart(targetCart)
        console.log(targetCart)
      })
  }, []);

另外你的渲染代码存在两处问题需要修正：

1. key={index.id}写法错误：index是当前遍历的下标数字，不存在id属性，推荐使用数据里唯一的cartID作为key值，性能更优
2. 字段名不匹配：你的表结构里商品名称字段是productName，不要错写为name
   修正后的渲染代码：

{myCart.map((item, index) => {
  return(
    <tr key={item.cartID}>
      <td>{index + 1}</td>
      <td>{item.productName}</td>
    </tr>
)}

内容的提问来源于stack exchange，提问作者Sky Scraper