React中无法访问JSON对象属性，报TypeError错误求助

1. 先判断数据状态再访问属性 #

组件渲染时，异步请求可能还未完成，data可能是undefined或空数组，直接访问data[0].type会触发报错。先做状态校验：

// 组件内逻辑
if (!data || data.length === 0) {
  return <div>加载中...</div>;
}

// 确认有数据后再访问属性
console.log(data[0].type);
return <div>{data[0].type}</div>;

2. 使用可选链操作符简化校验 #

用?.语法自动处理undefined/null的情况，避免手动写大量判断：

// 打印或渲染时直接使用
console.log(data?.[0]?.type);
return <div>{data?.[0]?.type || '暂无数据'}</div>;

3. 修正useFetch的初始值 #

确保封装的useFetch Hook给data设置正确的初始值，建议初始化为空数组而非undefined，避免后续判断混乱：

function useFetch(url) {
  const [data, setData] = useState([]); // 初始值设为空数组
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    axios.get(url)
      .then(res => {
        setData(res.data);
        setLoading(false);
      })
      .catch(err => {
        console.error(err);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

4. 理解console.log的异步特性 #

你看到console.log(data[0])能输出对象，但console.log(data[0].type)无结果，是因为浏览器console会保留对象引用，后续数据加载完成后会自动更新显示，但实际代码执行data[0].type时，data还未拿到值。不要依赖这个特性判断数据加载状态。

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