ReactでuseStateを使用して配列に配列を代入したい

Question

Reactで以下のような処理を作成しています。

const [list, setList] = useState([]);
var tmpList = [];
for (let i = 0; i < 5; i++) {
  tmpList.push(i);
}
setList([...list, tmpList]);
console.log(tmpList);
console.log(list);

useStateで値を管理しているのですが、コンポーネントが描画された際にしか更新されないため別の配列で値を保持しています。
この処理の結果は
tmpList → [0, 1, 2, 3, 4]
list → 0: [0, 1, 2, 3, 4]
となり、listの方が構造が一つ深くなってしまうのですが、tmpListと同じ値をセットするにはどのように記述すれば良いかご教示いただけないでしょうか。

Comments

[hoshi-takanori]

setList(tmpList); ってこと？

[fukuma]

こちらの質問の内容だとそれで問題ないですね。
テスト用に提示するコードがよくなかったので、修正して再度質問させていただきます。

[fukuma]

ご指摘ありがとうございます

Answer 1

tmpList が配列のため、
そのまま [...list, tmpList] してしまうと、
[listの内容, [tmpListの内容]] となり、二次元配列になってしまいます。

解決案としては、tmpList を展開して setList してあげましょう。

setList([...list, ...tmpList]) 

としてみてはいかがでしょうか。

Comments

[fukuma]

挙動を理解することができました。
教えていただき、ありがとうございます。