如何使用Axios从API获取数组内的对象？

从你的代码来看，你已经成功获取到了目标数据res.data.data[0]，这个对象里包含了名为0、1、2的三个相机对象，直接通过方括号属性访问就能提取出来，具体修改如下：

useEffect(() => {
  if (props.product_id) {
    axios.get(`https://51fgc922b7.execute-api.ap-south-1.amazonaws.com/dev/productpreview?product_id=${props.product_id}`)
      .then((res) => {
        const productData = res.data.data[0];
        // 提取三个数字命名的相机对象
        const camera0 = productData[0];
        const camera1 = productData[1];
        const camera2 = productData[2];
        
        // 根据你的需求存储数据：可以放到数组状态，也可以单独存
        setModelData([camera0, camera1, camera2]);
        // 比如单独存状态：setCamera0(camera0)、setCamera1(camera1)...
      })
      .catch((error) => {
        setIsErrorImage(true);
      });
  }
}, [props.product_id]); // 补充依赖项，product_id变化时自动重新请求

注意事项： #

• 因为属性名是数字，必须用方括号[]访问，不能用点语法（productData.0是无效写法）
• 如果担心某个相机对象不存在，可添加默认值避免报错：const camera0 = productData[0] || {};
• 原代码的useEffect依赖项为空数组，建议加上props.product_id，确保product_id更新时能重新获取对应数据

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