Linter 或用户错误：从使用设置状态影响导致循环

Question

目前，我的组件如下所示：

const { listOfStuff = [{name:"john"},{name:"smith"}] } = props

const [peopleNames, setPeopleNames] = useState([])

useEffect(() => {

  listOfStuff.forEach(userName => {

    setPeopleNames(peopleNames.concat([userName.name]))

  })

},[listOfStuff, peopleNames])

正如您可能看到的，这会导致无限循环，因为正在更新。因为它包含在依赖项数组中。peopleNames

现在，我可以将其从依赖项数组中删除。但我的棉绒会对我大喊大叫。以前的经验告诉我，要相信自己的衣裳而不是自己的判断。

我觉得我在这里错过了一些基本的东西。

理想情况下，我希望状态看起来像这样peopleNames

['john','smith']

Answer 1

setPeopleNames(current => current.concat([userName.name]))然后，可以从依赖项数组中删除。peopleNames从 useState ie setState 返回的第二个数组项可以采用函数作为其参数，其中函数的参数是状态的当前值。因此，您可以根据当前状态值进行更改，而无需引用 useState 的第一个参数。进一步的家庭作业：您的使用效果代码可以简化为：useEffect(() =>    setPeopleNames(current =>        current.concat(listOfStuff.map(stuff => stuff.name)    ),    [listOfStuff]);