Question

我正在尝试传递来自get get请求的对象数组到组件的状态，该状态有一个数组。我可以成功传递一组数字，或者除了对象之外的任何东西，当我这样做时，我会收到这个： error_image.png

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

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

comment.js：

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

Answer 1

渲染时，this.state.comments尚未提供，这就是导致undefined错误的原因。尝试添加一个条件，只有在state.comments变量可用时才会对呈现给定注释作出反应。

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

Answer 2

问题是当您尝试使用数据时this.state.comments[0]不可用。所以你需要在使用之前进行检查

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

但是我认为您希望映射注释而不是显示它。你可以这样做

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

Answer 3

确保您同样检查comments和length，就像这样 -

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

在React Component的状态

3 个答案: