/

使用useState與對象：如何更新

使用useState與對象：如何更新

當使用useState定義的狀態變量是一個具有屬性的對象時，如何更新它可能有些困惑。

你不能只是更新對象，否則組件將不會重新渲染。

我找到的一種模式涉及創建一個帶有一個屬性的臨時對象，並使用對象解構來從現有的兩個對象中創建一個新對象：

1
2
3
4
5
6
7
8
9
10
const [quizAnswers, setQuizAnswers] = useState({})

...

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

同樣的技巧也可以用於刪除屬性：

1
2
3
4
5
6
const copyOfObject = { ...quizAnswers }
delete copyOfObject['propertyToRemove']

setQuizAnswers({
 ...copyOfObject
})

tags: [“useState”, “object”, “state variable”, “update”]