React Hooks 無限循環

Question

所以我有一個項目組件，它從我的項目上下文中獲取數據。 我正在嘗試 select 該對象數組中的第一個 object 並將其傳遞給新的 state。

項目組件

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

不要在渲染時更改 state，您可以在useEffect中進行更改或給出初始值

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

或者

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