Reactjs I'；M GETTING TypeError:records.map不是我的react应用程序中的函数

我得到了这个错误：

TypeError:records.map不是MY 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>
    );
  }

}

这是我从中获取的API：

---

在我看来，您的

记录只是一个对象，因此您不能使用map进行迭代-您必须在profiles数组上进行迭代

改变

setRecords（数据）

到

setRecords（data.records.profiles）
您需要转到api响应（records）的数组部分，否则数据将是无法使用的对象（{}）。data.records.profiles将是一个数组（[]），它将与.map函数一起工作

将代码更改为

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

还要检查记录是否未加载

 {!loading ? <Records records={records} /> : <></>}

{！正在加载？：}

您可能还想将状态名称更改为“profiles”，而不是records，因为您只使用响应上的profiles部分。。。没有区别。当I console.log it更改为data.profiles后，它表示未定义。我是否需要更改传递给Records组件的道具？如果是，我要更改什么？当我将“配置文件”添加到data.profiles中时，我得到一个未定义的错误，仍然是映射未定义的错误。我需要更改传递给记录组件的道具吗？如果是的话，我该做些什么改变？@Bruno我更新了代码，自己测试了它，现在可以工作了。我非常感谢您的帮助，很乐意为其他可能有同样问题的人将评论标记为正确并投票
 {!loading ? <Records records={records} /> : <></>}