调用 setState 后反应状态不会立即更新

Question

我正在构建一个基于网络的软件的前端，我想在每次按下添加按钮时添加新的注释。

但这根本就没有发生。仅当我更改另一个对象的状态时才会呈现新注释。在我的正下方附上代码。请帮忙，我卡在这里了。

const [allnotes, setAllNotes] = useState(notes)

const addNote = () => {
  let notesAllTemp = allnotes;
  allnotes.forEach((n, index) => {
  if((n.id === clickedId)){
     notesAllTemp[index].notesDescs.push({id: 
      notesAllTemp[index].notesDescs.length+1,desc:''})
      setAllNotes(notesAllTemp)
    }
  });
}

如果有人能解决这个问题，请帮忙。

Answer 1

最好先修改数组然后立即更新

const [allnotes, setAllNotes] = useState(notes)

const addNote = () => {
  let notesAllTemp = allnotes;
  allnotes.forEach((n, index) => {
    if((n.id === clickedId)){
      notesAllTemp[index].notesDescs.push({id: 
      notesAllTemp[index].notesDescs.length+1,desc:''})
    }
  });
  setAllNotes(notesAllTemp)
}

Answer 2

请不要错误直接通过索引更新数组元素你应该先将数组复制到一个新数组中，否则会直接更新数组导致reacjs不re-render 组件。

看看这个

const [allnotes, setAllNotes] = useState(notes)

const addNote = () => {
  let notesAllTemp = [...allnotes]; // !IMPORTANT to copy array
  allnotes.forEach((n, index) => {
  if((n.id === clickedId)){
     notesAllTemp[index].notesDescs.push({id: 
      notesAllTemp[index].notesDescs.length+1,desc:''})
    }
  });
  setAllNotes(notesAllTemp);
}

调用 setState 后反应状态不会立即更新

React state is not updating immediately after setState is being called

reactjs

react-hooks

react-functional-component

use-state