javascript - 无法使用 React 中的 useEffect Hook 将 json 服务器数据连接到数组中

Question

我是 React 和全栈开发的新手，所以请多多包涵。我正在尝试将来自 json-server(我使用 Axios 接收到的)的数据连接到一个数组。我正在使用 React 钩子(Hook)来更新状态。出于某种原因，即使 personObject 在控制台中显示正常(有 4 个元素，每个元素都有一个名称和一个 ID)，当我 console.log 时会弹出一个空数组。这是 useEffect 代码。

const [ persons, setPersons] = useState([])

useEffect(() => {

console.log('effect')
  axios
    .get('http://localhost:3001/persons')
    .then(response => {
      console.log('promise fulfilled')
      const temp = response.data

      temp.forEach(function(e) {
        let personObject = {
          content: e.name,
          id: e.id,
        }
        console.log(personObject)
        setPersons(persons.concat(personObject))

      })

      console.log(persons)
    })
}, []) ```

Answer 1

更新状态是异步的。例如:

const state  = {
  myValue: 1
}

const someFunctionThatUpdatesState = () => {
    console.log("before", state.myValue)
    setState({ myValue: 2})
    console.log("after", state.myValue)
}

你认为控制台显示了什么？

您可能希望它记录 before, 1和 after, 2 , 但实际记录的是 before, 1 , after, 1 .

当您设置状态时，您实际上并不是在设置状态，而是在安排状态更新。您基本上是在告诉 React 需要将状态更新为您传递给 setState 的值。 .

在组件重新渲染之前，React 实际上不会更新状态，因此在您的情况下， persons仅在函数结束并且组件更新后才具有新值。

说到这，你的功能有一个缺陷:

 setPersons(persons.concat(personObject))

由于 persons在重新渲染之前不会改变，你基本上是在取消你的 setState调用每次迭代。您实际上是在这样做:

setPersons([].concat(personObject1))
setPersons([].concat(personObject2))
setPersons([].concat(personObject3))
setPersons([].concat(personObject4))

您的结果将最终成为一个数组，其中只有最终值，其余的都将被覆盖。

你想要的是这样的:

 .then(response => {
  console.log('promise fulfilled')

  // make sure data actually exists
  if (response && response.data) {
      // use prev, which is the up-to-date state value
      setPersons(prev => [
          // spread the current value of `prev`
          ...prev,
          // map the data and spread the resulting array
          ...response.data.map(item => ({
              id: item.id,
              content: item.name,
          })),
      ])
  }
})

我所做的更改是:

检查数据是否存在!如果 data 会发生什么？是 undefined ?

使用map而不是 forEach .你正在做的是将你的数据数组映射到一个状态数组，所以只需使用 map函数而不是 forEach .

替换 concat使用扩展语法 ... .它更简洁，更易于阅读。

只调用setPersons一次，将函数传递给 setPersons .

如果您的新状态值取决于旧状态(如 persons ，您将新数据附加到旧数据数组中)，您应该将函数传递给 setState . prev是最新的状态值，因此您可以依赖它。做类似 setPersons(persons....) 的事情(在 persons 内使用 setPersons 容易出错。