useEffect和useState用于获取API数据

Question

我希望使用useEffect(在挂载上)从API中获取并将其存储在useState中。Fetch API用于获取数据。问题是当初始页面加载时，以及当我重新加载页面时，它会输出一个名为test.map is not a function的错误。为什么会发生这种情况，以及如何避免这种情况？

​

import { useEffect, useState } from 'react';
function App() {

  const[test, setTest] = useState({})
  useEffect(() => {
    testfunc()
  }, [])

  async function testfunc(){
      let api = await fetch('https://jsonplaceholder.typicode.com/users')
      let apijson = await api.json()
      setTest(apijson)
  }
  

  return (
    <div className="App">
      {
        test.map((item) => {
          return(
            <div>
              {item.name}
            </div>
          )
        })
      }
    </div>
  );
}

export default App;

​

Answer 1

必须首先将{}更改为数组，才能对其进行映射。您可以很容易地将?放在像这样的测试之后。或使状态的默认值成为项名的默认值。因为在对空对象进行映射时会导致此错误。

import { useEffect, useState } from 'react';
function App() {

  const[test, setTest] = useState([{name:"default"}])
  useEffect(() => {
    testfunc()
  }, [])

  async function testfunc(){
      let api = await fetch('https://jsonplaceholder.typicode.com/users')
      let apijson = await api.json()
      setTest(apijson)
  }
  

  return (
    <div className="App">
      {
        test?.map((item) => {
          return(
            <div>
              {item.name}
            </div>
          )
        })
      }
    </div>
  );
}

export default App;

Answer 2

您无法在对象{}上映射，因此您应该需要为基本状态定义一个数组[]：

const[test, setTest] = useState([])

Answer 3

如前所述，不能对对象使用.map。而不是这个，你可以做这样的东西。

Object.keys(test).map(key => {
      const currentSmth = test[key]
      return(
        <div>
          {currentSmth.name}
        </div>
      )
    })
})

我认为它能帮助你解决问题。小心使用正确的数据结构和方法。