オブジェクトでのuseStateの使用：更新方法

useStateで定義された状態変数が、追加/更新するプロパティを持つオブジェクトである場合、それを更新する方法はやや混乱します。

オブジェクトを更新するだけでは不十分です。そうしないと、コンポーネントが再レンダリングされません。

私が見つけたパターンには、1つのプロパティで一時オブジェクトを作成し、オブジェクトの破棄を使用して、既存の2つのオブジェクトから新しいオブジェクトを作成することが含まれます。

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

…


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

同じ手法を使用して、プロパティを削除できます。

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

setQuizAnswers({
…copyOfObject
})

私の無料ダウンロードReactハンドブック


その他の反応チュートリアル：


Tech Wiki Online！