React Hook で管理する値の更新について

はじめに

ReactHooksで配列などで管理している値を変更したい際の方法をまとめました。

配列の更新

配列をHooksで管理している際は以下のように変更できます。

配列の最後に要素をプッシュ part1

sample.js

const [sampleArray, setSampleArray] = useState(initialArray);

const newArray = Array.from(initialArray);
newArray.push(newValue);
setSampleArray(newArray);

配列の最後に要素をプッシュ part2

sample.js

const [sampleArray, setSampleArray] = useState(initialArray);

setSampleArray(oldArray => [...oldArray, newValue]);

オブジェクトの更新

オブジェクトをHooksで管理している際は以下のように変更できます。

オブジェクトの最後に要素をプッシュ/更新する part1

sample.js

const [sampleArray, setSampleArray] = useState(initialArray);

const newObj = Object.assign({}, initialArray);
newObj[currentOrNewKey] = newValue;
setSampleObject(newObj);

オブジェクトの最後に要素をプッシュ/更新する part2

sample.js

const [sampleArray, setSampleArray] = useState(initialArray);

setSampleObject(oldState => ({ ...oldState, currentOrNewKey: newValue}));

オブジェクトの最初に要素をプッシュ/更新する

sample.js

const [sampleArray, setSampleArray] = useState(initialArray);

setSampleObject(oldState => ({currentOrNewKey: newValue}, ...oldState));

オブジェクトの配列の最後に要素をプッシュ/更新する

sample.js

const [sampleArray, setSampleArray] = useState(initialArray);

setSampleArray(oldState => [...oldState, {currentOrNewKey: newValue}]);