TypeError：无法读取未定义反应映射函数的属性“id”答案

【问题标题】：TypeError: Cannot read property 'id' of undefined react map functionTypeError：无法读取未定义反应映射函数的属性“id”
【发布时间】：2018-09-18 05:01:02
【问题描述】：

    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;

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

IN 控制台 -------------------

未捕获的类型错误：无法读取未定义的属性“id” 在 Post.jsx:35 在 Array.map() 在 Post.render (Post.jsx:34) 在完成类组件（react-dom.development.js:13537）在 updateClassComponent (react-dom.development.js:13500) 在 beginWork (react-dom.development.js:14089) 在 performUnitOfWork (react-dom.development.js:16415) 在 workLoop (react-dom.development.js:16453) 在 HTMLUnknownElement.callCallback (react-dom.development.js:145) 在 Object.invokeGuardedCallbackDev (react-dom.development.js:195) 在 invokeGuardedCallback (react-dom.development.js:248) 在 replayUnitOfWork (react-dom.development.js:15744) 在 renderRoot (react-dom.development.js:16547) 在 performWorkOnRoot (react-dom.development.js:17386) 在 performWork (react-dom.development.js:17294) 在 performSyncWork (react-dom.development.js:17266) 在 interactiveUpdates$1 (react-dom.development.js:17557)

【问题讨论】：

有人知道这个错误吗？
codeshare.io/anrK0Y 检查此链接这是整个代码
日志是这个codeshare.io/arrLDV

标签： reactjs flux

【解决方案1】：

你可以这样做。

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

【讨论】：

这有什么帮助。您仍在对空数组进行映射。数据也已经有唯一的 id 为什么他必须添加索引作为不推荐的键
我认为他们在帖子中没有 id，如果帖子为空地图将不会迭代 rt ？
看看他的代码，他已经从数据中添加了 id 作为键
你的状态好像没有更新。控制台PostStore.getAll() 并检查天气您是否获取数据
我检查了 console.log(PostStore.getAll()) ，是的状态工作正常。问题是别的

【解决方案2】：

最初，post 是一个空数组，因此在其上执行 map 将不起作用。检查它的长度，如果长度大于零，然后做映射。

你需要做类似下面的事情

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>)
        });

【讨论】：

好的，您可以分享 PostStore.getAll() 的控制台日志以及您在哪里调用 getPosts() 吗？分享整个代码
codeshare.io/anrK0Y 检查此链接这是整个代码
无法运行该代码。只需在 getPosts 中执行 PostStore.getAll() 的 console.log 并共享日志
它成功了，我会给你我的勾号。但我的问题是它是如何未定义的。有什么想法吗？
它还显示类似警告。 index.js:2178 警告：遇到两个具有相同密钥的孩子，false。密钥应该是唯一的，以便组件在更新时保持其身份。非唯一键可能会导致子项重复和/或省略 - 该行为不受支持，并且可能会在未来版本中更改。