reactjs - 我收到 TypeError：records.map 不是我的反应应用程序中的函数

Question

我收到此错误：

TypeError：records.map 不是我的 Records.js 文件中的函数

请问我的代码做错了什么？

这是我的app.js：

const App = () => {
  const [records, setRecords] = useState([])
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    const fetchRecords = async () => {
        setLoading(true)
        const res = await fetch('http://api.enye.tech/v1/challenge/records')
        const data  = await res.json();
        setRecords(data)
        setLoading(false)
      } 
     fetchRecords()
     // eslint-disable-next-line
  }, []) 

  console.log(records);
  
    return (
      <Fragment>
        <SearchBar />
        <div className='container'>
          <h2>Records Firstnames</h2>
          <Records loading={loading} records={records} />
        </div>
      </Fragment>
    );
  }

我正在渲染从此Records.js文件中获取的数据：

const Records = ({ records, loading }) => {
if(loading) {
    return <Preloader />
}
    return <ul className='collection mb-4'>
             {records && records.map(record => (
                <li key={record.id} className='collection-item'>
                    {record.FirstName}
                    {record.LastName}
                </li>
             ))}

            </ul>

}

这是我从中获取的 API：

标签： reactjs

Answer 1

据我所知，您records只是一个对象，因此您无法使用 map 进行迭代 - 您必须遍历 profiles 数组。

改变

setRecords(data)

至

setRecords(data.records.profiles)