对一个对象使用useState时该如何更新?

72 阅读1分钟

当一个用useState定义的状态变量是一个带有你添加/更新的属性的对象时,如何更新它就有点令人困惑了。

你不能只是更新这个对象,否则组件就不会重新渲染。

我发现的一个模式是创建一个有一个属性的临时对象,并使用对象的重构来从现有的两个对象中创建一个新的对象。

const [quizAnswers, setQuizAnswers] = useState({})

...

const updatedValue = {}
updatedValue[quizEntryIndex] = answerIndex
setQuizAnswers({
  ...quizAnswers,
  ...updatedValue
})

同样的技术也可以用来删除一个属性。

const copyOfObject = { ...quizAnswers }
delete copyOfObject['propertyToRemove']

setQuizAnswers({
  ...copyOfObject
})