React-redux 在 TypeError 中渲染帖子时出错：无法读取未定义的属性“地图”但控制台具有所有帖子

Question

As I am new to react ,I am trying to make a simple blog app using redux with react but I am facing issue while fetching the blogs.It is giving error TypeError: Cannot read property 'map' of undefined .Here is my code so please help me I m stuck here.

actions/index.js

export const FETCH_POSTS = 'fetch_posts';
export function fetchPosts() {
  const request = axios.get(`${ROOT_URL}/posts${API_KEY}`);

  return {
    type: FETCH_POSTS,
    payload: request
  };
}

reducers/reducer_posts.js

import { FETCH_POSTS } from '../action';
export default function (state = {post:[]}, action) {
  switch (action.type) {
  case FETCH_POSTS:
      return {
          ...state,
          post: action.payload,
      }
    default:
      return state;
  }
 }

reducers/index.js

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import PostsReducer from './reducer_posts';

const rootReducer = combineReducers({
  posts: PostsReducer,
  form: formReducer
});

export default rootReducer;

component/posts_index.js

class PostsIndex extends Component {
  componentDidMount() {
      this.props.fetchPosts();
  }
 render() {
      const post1=this.props
      console.log(post1)    //getting data in console
    const map_post= this.post1.map(post => <li key={post.id}>{post.title}</li>)
    console.log(this.props.posts);   // getting data here as well
    return(
      <div>
       <ul className="list-group">
      {map_post} 
        </ul>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { posts: state.posts ,
            post1:state.posts.posts
     };
}

export default connect(mapStateToProps, { fetchPosts })(PostsIndex);

src/App.js

const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
function App() {
  return (
    <Provider store={createStoreWithMiddleware(reducers)}>
    <BrowserRouter>
    <div className="App">
    <Switch>
          <Route path="/posts/new" component={PostsNew} />
          <Route path="/posts/:id" component={PostsShow} />
          <Route path="/" component={PostsIndex} />
        </Switch>
    </div>
    </BrowserRouter>
</Provider>
  );
}

Also I am getting all the post in my console when I log it by commenting out the

const map_post= post1.map(post => <li key={post.id}>{post.title}</li>)

but I am not able to render it in my component.I am getting error × TypeError: Cannot read property 'map' of undefined

Console Output having All post

Thanks in advance

Answer 1

Try changing your method

 componentDidMount() {
      this.props.fetchPosts();
  }

instead of

 componentDidMount() {
      this.props.dispatch(fetchPosts());
  }

Also in render method add this.post to

 const mappedTweets = this.post1 && this.post1.map(post => <li key={post.id}>{post.title}</li>);