反应钩无限循环

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]);
}