无法读取未定义的属性“地图”。错误还原

时间:2019-04-01 17:46:40

标签: javascript reactjs

Redux给出了一个错误。我找不到错误

我不明白我在哪里犯了错误。在创建redux之前,一切正常。 该错误在“ header.jsx”第10行中找到:

'让newPosts = props.state.post.map(p =>);' enter image description here TypeError:无法读取未定义的属性“ map”。还原后发生错误 帮我找到一个错误

'redux-store.js'

    import {createStore, combineReducers} from "redux/es/redux";
    import postReducer from "./postReducer";



    let reducers = combineReducers( {
    postPage: postReducer,
    addsPosts: postReducer
    });


    let store = createStore(reducers);

    export default store;

'postReducer.js'

 let initialState = {

    post:[

        { id: 1, posts: "Hello.Im a development this social networks. Welcome :)" },
        { id: 2, posts: "Yessssss! This start my first page" }

    ],

    postAdd: [
        {messagePost: ""}
    ]
};

export const postReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'ADD-POST':
            let newPost =
            {
                id: 4,
                posts: action.newMessage
            };
            state.post.push(newPost);
            state.newMessage = '';
            return state;

        case 'UPDATE-POST':
            state.postAdd.messagePost = action.newText;
            return state;
        default: return state;

    }

};


export const addpostCreater = (text) => {
    return { type: 'ADD-POST', newMessage: text }
};

export const updatepostCreater = (text) => {
    return { type: 'UPDATE-POST', newText: text }
};


export default postReducer;

'header.jsx'

import React from 'react';
import cssmod from './header.module.css';
import Mypost from './../components/mypost';
import { NavLink } from 'react-router-dom';
import { addpostCreater, updatepostCreater } from "../redux/postReducer";


const Header = (props) => {

    let newPosts = props.state.post.map (p => <Mypost id={p.id} posts={p.posts} />);

    let newpostElement = React.createRef();

    let addPost = () => {
        let text = newpostElement.current.value;

        props.dispatch(addpostCreater(text));
        props.state.postAdd.messagePost = '';

    };

    let newUpdatePost = () => {
        let text = newpostElement.current.value;
        props.dispatch(updatepostCreater(text));
    }; 

...


the page should load

2 个答案:

答案 0 :(得分:0)

无法发表评论,因为我不是50名代表。但是,您永远不应直接修改状态,而应返回新状态。状态方法state.post.push直接修改状态,尝试使用诸如map方法调用之类的方法,而不是在ADD-POST动作的reducer中进行修改,因为它会返回一个新数组。

答案 1 :(得分:0)

错误消息表明您正在尝试在非数组对象上调用.map。或者至少在调用时不是数组。