React中使用Axios获取数据后调用.map()报TypeError问题求助

核心问题：API返回数据结构不符 #

你调用的https://yields.llama.fi/pools接口返回的不是直接的数组，而是一个包含data字段的对象，结构大致如下：

{
  data: [/* 池子数组数据 */],
  // 其他额外字段
}

你直接将res.data赋值给pools，导致pools从初始的数组变成了对象，自然无法调用map方法。

修复步骤 #

1. 修正数据赋值 #

将setPools(res.data)改为setPools(res.data.data)，确保pools始终是数组类型：

useEffect(() => {
    axios.get('https://yields.llama.fi/pools')
      .then(res => {
        console.log(res.data.data) // 这里才是真正的池子数组
        setPools(res.data.data)
      })
      .catch(err => {
        console.log(err)
      })
  }, []);

2. 增加渲染时的安全校验 #

为了避免请求未完成或数据异常时的错误，可在渲染时先判断pools是否为数组：

return (
    <>
      <ul>
        {Array.isArray(pools) && pools.map(element=>
          <li
            key={`${element.chain}-${element.project}`} // 避免同一链下多个项目的key重复
          >
            {element.project}
          </li>
        )}
      </ul>
    </>
  )

3. 优化key的唯一性 #

你之前用element.chain作为key，但如果同一链下有多个不同项目，会出现重复key的警告，建议结合chain和project（或接口返回的唯一标识如poolId）生成唯一key。

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