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

Question

目前，我的组件如下所示：const { listOfStuff = [{name:"john"},{name:"smith"}] } = propsconst [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]);