TypeError: Cannot read property 'id' of undefined react map function

Question

    Post component
    ---------------


    import React, { Component } from "react";
    import * as PostActions from "../actions/PostActions";
    import PostStore from "../store/PostStore";

    class Post extends Component {
      constructor() {
        super();
        this.loadPosts();
        this.getPosts = this.getPosts.bind(this);
        this.state = {
          post: []
        };
      }

      componentWillMount() {
        PostStore.on("change", this.getPosts);
      }

      componentWillUnmount() {
        PostStore.removeListener("change", this.getPosts);
      }

      getPosts() {
        this.setState({
          post: PostStore.getAll()
        });
      }

      loadPosts() {
        PostActions.fetchPosts();  // Action 
      }

      render() {
        const postItems = this.state.post.map(post => (
          <div key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.body}</p>
          </div>
        ));

        return (
          <div>
            <h1>Posts</h1>
            {postItems}
          </div>
        );
      }
    }

    export default Post;

----------------------------------------------

在控制台中 ------------------

Uncaught TypeError: Cannot read property 'id' of undefined at Post.jsx:35 at Array.map () at Post.render (Post.jsx:34) at finishClassComponent (react-dom.development.js:13537) at updateClassComponent (react-dom.development.js:13500) at beginWork (react-dom.development.js:14089) at performUnitOfWork (react-dom.development.js:16415) at workLoop (react-dom.development.js:16453) at HTMLUnknownElement.callCallback (react-dom.development.js:145) at Object.invokeGuardedCallbackDev (react-dom.development.js:195) at invokeGuardedCallback (react-dom.development.js:248) at replayUnitOfWork (react-dom.development.js:15744) at renderRoot (react-dom.development.js:16547) at performWorkOnRoot (react-dom.development.js:17386) at performWork (react-dom.development.js:17294) at performSyncWork (react-dom.development.js:17266) at interactiveUpdates (react-dom.development.js:17557)

Answer 1

最初 post 是一个空数组，因此无法对其进行映射。检查它的长度，如果长度大于零然后做映射。

您需要执行以下操作

const {post} = this.state;
const postItems = post.length > 0 && post.map(p => {
          return (<div key={p!= undefined && p.id}>
            <h3>{p!= undefined && p.title}</h3>
            <p>{p!= undefined && p.body}</p>
          </div>)
        });

Answer 2

你可以做到这一点。

const postItems = this.state.post.map((post, id) => (
  <div key={id}>
    <h3>{post.title}</h3>
    <p>{post.body}</p>
  </div>
));

TypeError: Cannot read property 'id' of undefined react map function

TypeError: Cannot read property 'id' of undefined react map function

flux

reactjs