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

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

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

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

React.js

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

Q&A

0回答

231閲覧

reduxの「x.map is not a function」エラーを解決したい

cute

総合スコア0

Redux

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

React.js

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

0グッド

0クリップ

投稿2021/02/06 05:00

現在、reactにてreduxを用いたtodoリストを作成しています。
action,reducer,storeを作成してApp.js内にてstoreから取得した値をmapメソッドで表示させたいのですが、.map is not a functionというエラーが表示されてしまいます。
調べたところ、mapメソッドは配列に対するメソッドであり、受け取っているのがオブジェクトのためエラーがでているということは見当がついたのですが、どこを修正すれば良いのかがわかりません。

何かご助言いただけると幸いです。
よろしくお願い致します。

index.js

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { Provider } from 'react-redux'; import listStore from './redux/store'; export const store = listStore(); ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ); reportWebVitals();

App.js

import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import './App.css'; import { addAction } from './redux/list.action'; import TodoList from './TodoList'; const App = () => { const dispatch = useDispatch(); const lists = useSelector((state) => state) return ( <div className="App"> <h1> リスト一覧</h1> <ul className="lists"> {lists.map((list, index) => { return ( <TodoList text={list.text} key={index} /> ) })} </ul> </div> ); } export default App;

Todolist.js

import React from 'react'; const TodoList = (props) => { return ( <li> {props.text} </li> ) } export default TodoList;

list.action.js

export const ADD_LIST = "ADD_LIST"; export const addAction = (userState) => { return { type: "ADD_LIST", payload: { text: userState.text, } } };

list.reducer.js

import initialState from "./initialState"; import * as Actions from "./list.action"; const ListReducer = (state = initialState, action) => { switch (action.type) { case Actions.ADD_LIST: return { ...state, ...action.payload } default: return state } } export default ListReducer;

initialState.js

const initialState = { text: "メール返信" }; export default initialState

store.js

import { createStore, combineReducers } from 'redux'; import ListReducer from "./list.reducer"; const listStore = () => { return createStore( combineReducers({ lists: ListReducer, }) ); } export default listStore;

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問