javascript - React Hooks 无限循环

Question

所以我有一个项目组件，它从我的项目上下文中获取数据。我正在尝试选择该对象数组中的第一个对象并将其传递到新状态。

项目组件

const projects = useContext(ProjectContext) // array of objects from context
const [selected, setSelected] = useState({}) // where i will pass projects[0]
const selectProj = (data) => {
    setSelected(data) // INFINITE LOOP ERROR
}

if (projects.length > 0) {
    selectProj(projects[0])
}

所以我有点迷失在这里要做什么。

更新:我使用的答案

const projects = useContext(ProjectContext) // array of objects
const [selected, setSelected] = useState({})

const selectProj = (data) => {
    setSelected(data)
}

useEffect(() => {
    if (projects.length > 0) {
        selectProj(projects[0])
    }
}, [projects])

Answer 1

您将陷入无限循环，因为 setSelected 会导致重新渲染，并且在重新渲染时 projects.length 再次大于 0，这会导致另一个重新渲染，依此类推。

避免这种情况的一种方法是仅在尚未选择项目时调用 selectProj:

if (!selected && projects.length > 0) {
  selectProj(projects[0]);
}