質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

731閲覧

useReducer stateが配列がネストされてみたな形になってします

2_34_koki

総合スコア67

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/05/31 10:18

状態管理にuseReducerを使用しています。

const initialState: Data[] = new Array(); const reducer = (state, action: DataAction) => { switch (action.type) { case DataType.GET: console.log(Object.assign(state, action.res)); //コンソール [{...},{...},{...}...]いい感じ return Object.assign(state, action.res); //コンソール [] クリックすると{...},{...}..は入っているが配列[0]でやっても[]が帰ってくる default: state; } }; コンポーネントに渡すときにreturn [state]で渡してます(分割代入)

なぜ、Object.assignで同じように書いているのに結果が変わるのでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2020/05/31 10:22

action.resの中身はどのようなものでしょうか?
2_34_koki

2020/05/31 10:24

action.res = [ {id:1, name: "a"}, {id:2, name: "b"},.....}] みたに配列の中に連想配列が複数入ってる感じです
maisumakun

2020/05/31 10:25

既存のstateとどのようにマージする想定ですか?
2_34_koki

2020/05/31 10:27

最初にstateは[]でよくて,DBからデータを撮ってきてstateを更新する感じです。 そのあとはstateの更新はありません。
guest

回答1

0

ベストアンサー

なぜ、Object.assignで同じように書いているのに結果が変わるのでしょうか?

変わる変わらない以前に、stateへのObject.assign破壊的変更に当たるので、基本的にやってはいけません。

stateが配列なら、const ret = [...state];const ret = state.slice()のようにコピーしてからコピーを加工して返すようにしましょう。

投稿2020/05/31 10:24

maisumakun

総合スコア145123

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2020/05/31 10:29 編集

> 最初にstateは[]でよくて,DBからデータを撮ってきてstateを更新する感じです。 それなら、取ってきたものをそのまま返せば用件は片付くので、return action.res;だけで大丈夫です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問