javascript - 在 React JS 组件中显示数组

Question

我对 ReactJS 还很陌生，希望有人能帮助我。

我从 API 获取一个 JSON 对象，并希望在我的组件中显示一些信息。

该对象看起来有点像这样:

{
  name: Tom,
  types: [
          {
            slot: 1,
            type: {url: xyz, name: TomsURL}
          },
          {
           slot: 2,
           type: {url: zyz, name: OtherName
          }
  ],
  ...
}

现在我想显示我的组件中的一些数据。 组件“Body”包含请求方法，并通过 props 将获取的数据发送到布局组件

export default class Body extends Component {
constructor(){
    super();
    this.state = {
        person: ""
    }
}

handleSubmit(e){
    getRequest.fetchData()
    .then(function(response){
        if(response.status === 404){
            alert("Unbekannter Name");
        }else{
            this.setState(function(){
                return {
                    person: response.data
                }
            })    
        }
    }.bind(this));
}

render() {
    return ( 
        <div>
            <Form handleSubmit={this.handleSubmit.bind(this)}/>
            <Layout person={this.state.person}/>
        </div>
    );
}
}

这是我想要显示数据的布局组件:

export default class Layout extends Component {

render() {
    var person= this.props.person
    return ( 
        <div>
            <ul>
                <li>{person.name}</li>
                <li>{person.types[0].type.name}</li>

            </ul>
        </div>
    );
}
}

如果我尝试启动应用程序，我会收到错误无法读取未定义的属性“0”

我认为这是因为在我通过单击按钮请求数据之前该组件中没有数据可显示。在按下按钮之前，我只想显示没有数据的应用程序，然后它应该更新

Answer 1

人是一个对象，对吗？如果是这种情况，您应该在构造函数中将其设置为空对象(而不是字符串)以保持一致。

constructor(){
    super();
    this.state = {
        person: {}
    }
}

现在，为了仅在信息可用时显示信息并将其保留为空白，您需要做的是检查具有信息的 person 属性(也称为不是空对象)。

export default class Layout extends Component {

render() {
    var person = this.props.person
    if (Object.values(person).length !== 0) {
      return ( 
        <div>
            <ul>
                <li>{person.name}</li>
                <li>{person.types[0].type.name}</li>

            </ul>
        </div>
      );
    }
    return null;    
 }
}