临界点或用户错误。从useEffect设置状态导致循环

Question

目前我的组件看起来像。

const { listOfStuff = [{name:"john"},{name:"smith"}] } = props
const [peopleNames, setPeopleNames] = useState([])

useEffect(() => {
  listOfStuff.forEach(userName => {
    setPeopleNames(peopleNames.concat([userName.name]))
  })
},[listOfStuff, peopleNames])

正如你可能看到的，这将导致一个无限循环，因为... peopleNames 正在更新。因为它包含在依赖关系数组中。

现在，我可以把它从依赖关系数组中删除，但我的linter会对我大喊大叫。但我的linter会对我大喊大叫，而且以前的经验告诉我，要相信我的linter而不是我自己的判断。

我觉得我好像漏掉了一些基本的东西。

理想情况下，我希望 peopleNames 样子

['john','smith']

Answer 1

setPeopleNames(current => current.concat([userName.name]))

然后你可以删除 peopleNames 从依赖关系数组中返回。

useState 返回的第二个数组项即 setState 可以使用一个函数作为参数，而函数的参数是当前状态的值。所以你可以根据当前的状态值进行修改，而不需要引用useState的第一个参数。

进一步的功课。

你的useEffect代码可以简化为：

useEffect(() =>
    setPeopleNames(current =>
        current.concat(listOfStuff.map(stuff => stuff.name)
    ),
    [listOfStuff]);