Question

我对ReactJS很新，我希望有人可以帮助我。

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

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

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

现在我想在我的组件中显示一些数据。 Component'Fody'包含请求方法，并通过props将获取的数据发送到Layout Component

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

如果我尝试启动应用程序，则会收到错误Cannot read property '0' of undefined

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

Answer 1

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

constructor(){
    super();
    this.state = {
        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;    
 }
}

Answer 2

您可以在render功能

中使用条件

   <div>
        <Form handleSubmit={this.handleSubmit.bind(this)}/>
        {this.state.person ? <Layout person={this.state.person}/> : null}
    </div>

Answer 3

理想情况下，您应该映射整个人JSON对象，并提取所需的特定数据。

在将person对象作为道具传递给布局组件之前，使用my_parameter = pd.read_sql_table("SameAs", db)函数

循环它

map()

在React JS组件中显示数组

3 个答案: