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

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

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

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

Next.js

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

TypeScript

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

React.js

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

解決済

useSelectoreから取得したデータをuseStateにsetしたい

makoxti
makoxti

総合スコア32

Redux

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

Next.js

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

TypeScript

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

React.js

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

2回答

0評価

0クリップ

391閲覧

投稿2022/02/10 17:34

技術スタック

React, Redux ToolKit, TypeScript, Next.js

作りたいアプリ

他画面で入力した値をRedux ToolKitの機能を使って別の画面で表示する

解決したい事象

フロントエンド初学者です。
useSelectoreから取得したデータをuseStateにsetし、map処理で1行ずつ取り出そうとすると、エラーになってしまいます。

useStateの定義

let property: Property[] = []; const [users, setUser] = useState(property);

useSelectoreからデータの取得

以下の方法でuseSelectoreからデータを取得しています。
const storeState = useSelector((state) => state.stateManagement);
storeStateをコンソールに出力した結果がこちらです。
イメージ説明

Stateへset処理

setUser(storeState)

map処理

map処理を一部抜粋します。

{users.map((user) => { return ( <td className="py-4 px-6 text-sm font-medium text-gray-900 whitespace-nowrap dark:text-white"> {user.name} </td> )}

エラー内容

イメージ説明

ソースコード全体

ソースコードはGitHubにpushしております。
https://github.com/makoxty/next_ts_tailwindcss
事象に関係ありそうなファイルの説明をします。
ListBody.tsxが一覧画面を表示するためのファイルです。
今回のエラーはこのファイルで起きています。
Add.tsxがデータを入力する画面です。
なので流れとしては、localhost:3000にアクセスすると一覧画面が表示されます。
最初は何もデータがないので、テーブルのヘッダだけ表示されていて欲しいです。
ナビゲーションの 登録 リンクよりデータの登録画面へ遷移し、データを入力します。
入力完了後に登録ボタンを押下し、ナビゲーションの Home リンクを押下後、入力画面で入力したデータが一覧に表示されていてほしいです。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

hoshi-takanori

2022/02/10 19:33

「useSelectorから取得したデータをuseStateにset」すると、useSelector で取得した値 (redux が持つ、single source of truth であるべき値) とは別に、ローカルの state ができて二重管理することになると思いますが…。
makoxti

2022/02/11 08:20

なるほどです。 useSelectorから取得したデータを一覧で表示するにはどのように実装すればよろしいでしょうか。 具体的には、useSelectorから取得したデータをmapで繰り返して処理する実装方法のイメージがつかないです。
hoshi-takanori

2022/02/11 11:15

ソースコード拝見しましたが、stateSlice.tsx で add した時に、配列への要素の追加になってないですね。 また、Add.tsx を見ると、そもそも state の扱い方の理解に問題がありそう…。
makoxti

2022/02/11 15:56

ソースコードを見て頂きありがとうございます。 なるほど、Stateの理解に問題があるのですね。 Stateも含め、ReactHooksでの開発方法の考え方の参考になるサイトや参考書等ご存知であれば教えて頂きたいです。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Redux

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

Next.js

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

TypeScript

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

React.js

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