React中使用SWR获取数据后无法调用map()方法求助

你的代码存在两个核心问题，导致无法正常渲染用户列表：

1. SWR 返回值解构错误 #

useSWR 的返回结果中，接口返回的数据存放在data字段里，你直接解构people会得到undefined，自然无法调用map()方法。需要将data重命名为people来使用。

2. map 回调未返回JSX元素 #

你使用了带大括号的箭头函数，但没有显式返回JSX元素，导致map()最终返回的是一个全为undefined的数组，页面不会渲染任何内容。可以通过两种方式修复：

• 去掉大括号，让箭头函数隐式返回元素
• 在大括号内添加return语句

另外，React列表渲染要求每个子元素必须有唯一的key属性，建议添加person.id作为key避免警告。

修正后的完整代码 #

import "./App.css"
import useSWR from "swr"

function App() {
  const fetcher = (...args) => fetch(...args).then((res) => res.json())
  // 将SWR返回的data重命名为people
  const { data: people } = useSWR(
    "https://jsonplaceholder.typicode.com/users",
    fetcher,
    { suspense: true }
  )

  return (
    <div>
      {/* 隐式返回JSX元素，同时添加key属性 */}
      {people.map((person) => (
        <div key={person.id}>{person.name}</div>
      ))}
    </div>
  )
}

export default App

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