React调用Coincap API时控制台可获取数据但渲染时apiData为undefined的问题咨询

你的问题其实是React组件渲染时机和状态初始化的问题，完全不需要重复执行useEffect哦，我来给你拆解清楚：

问题根源 #

组件第一次渲染的时候，apiData的初始值应该是undefined（因为你没给useState设置初始值），而useEffect是在组件挂载完成后才会发起API请求。这时候你直接在return里访问apiData[0].id，就会因为apiData还没被赋值而触发类型错误。

解决方案 #

这里有几种简单的修复方式，你可以任选一种适配你的场景：

1. 给apiData设置初始空数组

初始化状态时就把它设为空数组，这样第一次渲染时apiData是[]，访问apiData[0]只会得到undefined，不会触发报错；再配合可选链操作符，就能安全访问属性：

const [apiData, setApiData] = useState([]); // 这里添加初始空数组

useEffect(() => {
  axios.get('https://api.coincap.io/v2/assets')
    .then(function (response) {
      setApiData(response.data.data)
    })
    .catch(function (error) {
      console.log(error);
    })
}, [])

return (
  <>
    {apiData[0]?.id} {/* 可选链操作符处理apiData[0]为undefined的情况 */}
  </>
)

2. 使用条件渲染（短路运算符）

在渲染前判断apiData是否存在且有数据，确保只有数据就绪时才渲染内容：

const [apiData, setApiData] = useState();

useEffect(() => {
  axios.get('https://api.coincap.io/v2/assets')
    .then(function (response) {
      setApiData(response.data.data)
    })
    .catch(function (error) {
      console.log(error);
    })
}, [])

return (
  <>
    {apiData && apiData.length > 0 && apiData[0].id}
  </>
)

3. 添加加载状态（更友好的用户体验）

如果想在数据加载时给用户明确提示，可以额外加一个加载状态：

const [apiData, setApiData] = useState([]);
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
  axios.get('https://api.coincap.io/v2/assets')
    .then(function (response) {
      setApiData(response.data.data)
      setIsLoading(false);
    })
    .catch(function (error) {
      console.log(error);
      setIsLoading(false);
    })
}, [])

// 加载中时显示提示
if (isLoading) {
  return <div>数据加载中...</div>;
}

return (
  <>
    {apiData[0]?.id}
  </>
)

为什么不需要重复执行useEffect？ #

你的useEffect依赖数组是[]，它已经会在组件第一次挂载完成后自动执行一次，API请求完成后会更新apiData状态，触发组件重新渲染。问题出在第一次渲染时数据还未就绪，所以我们需要做的是处理数据未准备好时的渲染逻辑，而不是重复执行useEffect。

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