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

Answer 2

请勿更改渲染状态，您可以在useEffect中进行设置或提供初始值

useEffect(()=> {
   setSelected(projects[0])
}, [])

或

const [selected, setSelected] = useState(projects[0]);

反应钩无限循环

2 个答案: