ReactのuseStateでハマったのでメモ。
要約
タイトル長いな。
- useStateでオブジェクトの配列を管理する際に思ったように値が更新できなくてハマった
- useStateで配列を更新するときは新しい配列を作らなくてはいけない
- useStateでオブジェクトを更新するときは新しいオブジェクトの配列を作らなくてはいけない
- useStateでオブジェクトの配列を更新するときは新しいオブジェクトの新しい配列を作らなくてはいけない
サンプル
こんなTodoListを作ってchangeを押すとtrue/falseが入れ替わるようにしたい。
ダメな例その1
changeを押しても何も変わらない。
https://codesandbox.io/s/intelligent-joana-u4298?file=/src/App.js
import { useState } from "react";
export default function App() {
let [items, updateItems] = useState([
{ name: "item 1", done: false },
{ name: "item 2", done: true },
{ name: "item 3", done: false }
]);
return (
<div>
<h2>Todo list</h2>
<ul>
{items.map((item, idx) => {
return (
<li key={idx}>
<span>{`${item.name} ${item.done} `}</span>
<button
onClick={() => {
updateItems((oldItems) => {
oldItems[idx].done = !oldItems[idx].done;
return oldItems;
});
}}
>
change
</button>
</li>
);
})}
</ul>
</div>
);
}
ダメな例その2：新しい配列を作ってみる
なるほど、どうやら新しい配列を作らないとReactに変更が伝わらずupdateが走らないらしい。
https://qiita.com/10mi8o/items/896df09ad89e41d48bac
というわけで新しい配列を作ってみる。
https://codesandbox.io/s/agitated-joana-4kj4s?file=/src/App.js
<button
onClick={() => {
updateItems((oldItems) => {
oldItems[idx].done = !oldItems[idx].done;
return [...oldItems]; // 新しい配列
});
}}
>
change
</button>
しかし、最初の1回のみ変わるもあとは動かない...
ダメな例その3：新しいオブジェクトを作ってみる
オブジェクトの方を変更しないといけないのかと思い今度は配列内部のオブジェクトを変更することにする
https://codesandbox.io/s/sweet-visvesvaraya-7yr4s?file=/src/App.js
<button
onClick={() => {
updateItems((oldItems) => {
// 新しいオブジェクトを作成
oldItems[idx] = {
...oldItems[idx],
done: !oldItems[idx].done
};
return oldItems;
});
}}
>
change
</button>
けど動かない。
うまくいった例：新しいオブジェクトを作って新しい配列に突っ込む
これで思った通りに動いた。
<button
onClick={() => {
updateItems((oldItems) => {
return oldItems.map((oldItem, oldIdx) => {
if (oldIdx === idx) {
return { ...oldItem, done: !oldItem.done };
}
return oldItem;
});
});
}}
>
change
</button>
なんでうまくいかなかったのか
React内部ではObject.isを使って比較しているらしい。
https://ja.reactjs.org/docs/hooks-reference.html#bailing-out-of-a-state-update
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/is#description
Object.isの結果を表示してみると以下のようになった。
<button
onClick={() => {
updateItems((oldItems) => {
console.log(
"新しい配列の中に古いオブジェクト:",
Object.is(items, [...oldItems]),
Object.is(items[idx], [...oldItems][idx])
); // false, true
oldItems[idx] = {
...oldItems[idx],
done: !oldItems[idx].done
};
console.log(
"古い配列の中に新しいオブジェクト",
Object.is(items, oldItems),
Object.is(items[idx], oldItems[idx])
); // true, true
const newItems = oldItems.map((oldItem, oldIdx) => {
if (oldIdx === idx) {
return { ...oldItem, done: !oldItem.done };
}
return oldItem;
});
console.log(
"新しい配列の中に新しいオブジェクト",
Object.is(items, newItems),
Object.is(items[idx], newItems[idx])
); // false, false
return newItems;
});
}}
>
change
</button>
配列の中のオブジェクトを内部でさらにどう比較しているかまでは調べられてないが、配列自体もオブジェクト自体もObject.isがfalseにならないといけないっぽい。
理解に間違い、より良い書き方などあれば教えてください🙇♂️