Question

未捕获的类型错误：在 REACT 中获取 API 链接时无法读取 null 属性（读取“0”）

2022-05-02

2879

javascript reactjs react-hooks

我已成功获取产品。但当我在控制台日志中看到它显示 null，然后显示 10 个产品的数组。

const [datas,setDatas]=useState(null);
const [loading,setLoading]=useState(false);

  useEffect(()=>{

        fetch('products.json')
        .then(result =>result.json())
        .then(data => setDatas(data));
        setLoading(true);
        
    },[]);



    console.log(datas);//no error occured

[![它显示 null 和 10 个产品][1]][1]

但当我访问 数据数组的第 0 个索引 时，它显示错误！这是我的代码

const [datas,setDatas]=useState(null);
const [loading,setLoading]=useState(false);
    useEffect(()=>{

        fetch('products.json')
        .then(result =>result.json())
        .then(data => setDatas(data));
        setLoading(true)
        
    },[]);

   console.log(datas[0]);//error occured

[![error occured][2]][2]


  


  [1]: https://i.sstatic.net/IFbqd.png
  [2]: https://i.sstatic.net/CD1AH.png

Answer 1

结果通常包装在具有如下属性的类型中；

export type ResponseResult<T> = {
    status: number;
    message?: string;
    data?: T;
    success?: boolean;
};

将 setDatas(data)); 替换为 setDatas(data.data)); ，看看效果是否更好。

此外，由于调用是异步的，您可能会遇到问题 - 除非您在调用的 .then() 部分中使用 console.log，否则不能保证数据已准备就绪。

类似

fetch('products.json')
   .then(result =>result.json())
   .then(x => {
       setDatas(x.data);
       console.log(datas);
   });
   setLoading(true);

... 应该可以工作。

Answer 2

由于接收 api 响应和设置状态是异步的，您需要检查状态数据是否未定义，只需将该行更改为：

if(datas && datas.length>0)
   console.log(datas[0]);