Question

当我加载我的应用时，来自firebase的数据将在componentdidmount中获取。我目前正在通过postComments={comments}作为道具。但是在此之前我的应用程序崩溃了

无法阅读属性＆＃39; id＆＃39;未定义的

在线

const comments = this.props.comments[post.id] || [];

这是因为我的帖子尚未提取。如何在componentdidmount激活之前防止此崩溃发生

import React from 'react';
import Photo from './photo';
import Comments from './Comments'
class Single extends React.Component {

  render() {
    console.log(this.props)
    const {posts, match} = this.props; 
    const i = this.props.posts.findIndex((post) => post.id === match.params.id);
    const post = this.props.posts[i];

    const comments = this.props.comments[post.id] || [];

        return (
          <div className="single-photo">
          <Photo key={i} post={post} i={i} {...this.props} />  
          <Comments {...this.props} postComments={comments} />   
          </div>
        )
      }
};

export default Single;

Answer 1

我认为你应该添加这个测试：

const comments = (post && this.props.comments[post.id]) || [];

Answer 2

有很多方法可以解决这个问题，但我只想补充一下：

const comments = this.props.comments[post.id] === undefined ? [] : this.props.comments[post.id]

无法读取属性＆＃39; id＆＃39;未定义，因为尚未提取数据

2 个答案: