Javascript 在数组内、React组件内渲染对象的属性'；s州

我正在尝试将从get请求获取的对象和数组传递到组件的状态，该状态有一个数组。我可以成功地传递一个数字数组，或者实际上除了对象以外的任何东西，因为当我这样做时，我收到了这个：

请查看下面我的.js文件，谢谢

评论\u item.js:

import React from 'react';
import axios from 'axios';

export class CommentItem extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      comments: []
    };
}

componentWillMount() {
  axios.get('api/v1/trip/2/comment/')
    .then(response => {
      const comments = [{a: 2, b: 4}, {a: 1, b: 3}]; //response.data should be here, but for your convenience I've put array of objects
      this.setState({comments});
    });
}

render() {
    return (
      <div>
        <ul>
            <li>
                {this.state.comments[0].a}
            </li>
        </ul>
      </div>
    );
  }
}

import React from 'react';

import Paper from 'material-ui/Paper';
import Divider from 'material-ui/Divider';
import List from 'material-ui/List/List';

import {CommentItem} from './comment_item';
import {CommentForm} from './comment_form';

const styles = {
  paper: {
      paddingLeft: 15,
      paddingRight: 15,
      paddingBottom: 15,

      marginLeft: 15,
      marginRight: 15,
      marginBottom: 15
  },

  divider: {
      backgroundColor: 'grey'
  }

};

export default class Comment extends React.Component {
    render() {
        return (
            <Paper zDepth={5} rounded={false} style={styles.paper}>
                <div>
                    <List>
                        <CommentItem />
                    </List>

                    <Divider style={styles.divider}/>
                    <CommentForm/>
                </div>
            </Paper>
        );
    }
}

从“React”导入React；
从“axios”导入axios；
导出类CommentItem扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
评论：[]
};
}
组件willmount（）{
axios.get（'api/v1/trip/2/comment/'））
。然后（响应=>{
const comments=[{a:2，b:4}，{a:1，b:3}]；//response.data应该在这里，但为了方便起见，我放置了对象数组
this.setState（{comments}）；
});
}
render（）{
返回(


{this.state.comments[0].a}


);
}
}

comment.js:

import React from 'react';
import axios from 'axios';

export class CommentItem extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      comments: []
    };
}

componentWillMount() {
  axios.get('api/v1/trip/2/comment/')
    .then(response => {
      const comments = [{a: 2, b: 4}, {a: 1, b: 3}]; //response.data should be here, but for your convenience I've put array of objects
      this.setState({comments});
    });
}

render() {
    return (
      <div>
        <ul>
            <li>
                {this.state.comments[0].a}
            </li>
        </ul>
      </div>
    );
  }
}

import React from 'react';

import Paper from 'material-ui/Paper';
import Divider from 'material-ui/Divider';
import List from 'material-ui/List/List';

import {CommentItem} from './comment_item';
import {CommentForm} from './comment_form';

const styles = {
  paper: {
      paddingLeft: 15,
      paddingRight: 15,
      paddingBottom: 15,

      marginLeft: 15,
      marginRight: 15,
      marginBottom: 15
  },

  divider: {
      backgroundColor: 'grey'
  }

};

export default class Comment extends React.Component {
    render() {
        return (
            <Paper zDepth={5} rounded={false} style={styles.paper}>
                <div>
                    <List>
                        <CommentItem />
                    </List>

                    <Divider style={styles.divider}/>
                    <CommentForm/>
                </div>
            </Paper>
        );
    }
}

从“React”导入React；
从“物料界面/纸张”导入纸张；
从“物料界面/分割器”导入分割器；
从“物料界面/列表/列表”导入列表；
从“/comment_item”导入{CommentItem}；
从“/comment_form”导入{CommentForm}；
常量样式={
论文：{
paddingLeft:15，
paddingRight:15，
填充底部：15，
marginLeft:15，
marginRight:15，
marginBottom:15
},
分隔器：{
背景颜色：“灰色”
}
};
导出默认类注释扩展React.Component{
render（）{
返回(
);
}
}

渲染时，

此.state.comments

尚不可用，这就是为什么出现

未定义

错误的原因。尝试添加一个条件，该条件将告诉react to render给定注释，前提是

state.comments

变量可用

<li>
   { this.state.comments.length ? this.state.comments[0].a : null }
</li>

{this.state.comments.length？this.state.comments[0]。a:null}

问题在于，当您尝试使用此.state.comments[0]时，该数据

不可用。所以你需要在使用前进行检查

render() {
    return (
      <div>
        <ul>
            <li>
                {this.state.comments[0]? this.state.comments[0].a: ''}
            </li>
        </ul>
      </div>
    );
  }
}

render（）{
返回(


{this.state.comments[0]？this.state.comments[0]。a:''}


);
}
}

然而，我认为您希望映射到评论，而不是显示它。你可以这样做

render() {
    return (
      <div>
        <ul>
            <li>
                {this.state.comments && this.state.comments.map((comment) => {
                    <li>{comment.a}</li>
                })}
            </li>
        </ul>
      </div>
    );
  }
}

render（）{
返回(


{this.state.comments&&this.state.comments.map（（comment）=>{
{comment.a}
})}


);
}
}
确保你也在检查
注释
和
长度
，就像这样-

(this.state.comments && this.state.comments.length > 0) ? 
    this.state.comments[0].a : null

首先感谢您的回复：）我试图将您的答案复制粘贴到我的代码中并刷新页面，但我得到的错误与以前完全相同。“你能给我解释一下它是怎么工作的吗？也许我还得换点别的。”罗曼说。这是您使用该变量的唯一地方。如果为空，则不应显示任何内容，如果不是，则应呈现适当的值。请尝试清除缓存并重新启动应用程序。我认为应该是
this.state.comments.length
因为初始值是
[]
：）@MayankShukla是的，我错过了该变量的默认值，谢谢！