fetchで取得したデータに対して動的検索をしたい

Question

以下の質問に付随する内容で教えていただきたいことがあります。
reactで動的な検索をしたい

以前の質問では、サンプルデータを用意して動的検索を行ったのですが、今回はfetchを使って取得したデータに対して動的検索を行いたいと考えていて、以下のようにコードを書き換えました。

デモ

取得したデータのコピーを作成したくて、[newArray, setNewArray]というuseStateを作ってfetchの処理の中で返ってきたデータを２つの配列にセットしています。
これで思い通りの挙動にはなったのですが、setArray(json); setNewArray(json);でわざわざ２回処理しているのが無駄な気がします。
加えて、そもそもこれは別の配列をstateとして用意しているので、コピーではないのでは？とも思います。
[newArray, setNewArray]を使わずに、fetchで返ってきた配列のコピーを作って動的に検索をしたいのですが、ほかによい書き方があれば教えていただきたいです。

よろしくお願いいたします。

Comments

[hoshi-takanori]

newArray が fetch してきた元データで、array が検索結果ってことですよね。
前の質問にもあった通り、元データと検索結果は別々に保存しないと元データがなくなるので、配列が 2 つになるのは正常です。
「setArray(json); setNewArray(json);でわざわざ２回処理しているのが無駄」という気持ちは分かりますが、useState を使う場合はそういうものでしょうね。

[alpha95]

useStateを使わずにスプレッド構文などを使って、配列が返ってきた段階でコピーを作成するやり方はないのかなと思っていたので質問しました。

ですが、useStateを使うのであればしょうがないのですね。
ありがとうございました。

Answer 1

Comments

[alpha95]

ご回答ありがとうございます。keywordをstateでもてばいいのですね。
補足もありがとうございます。
参考にさせていただきます。