Javascript 在React JS组件中显示数组

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

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

对象看起来是这样的：

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

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

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

导出默认类主体扩展组件{
构造函数（）{
超级（）；
此.state={
人：“
}
}
handleSubmit（e）{
getRequest.fetchData（）
.然后（功能（响应）{
如果（response.status==404）{
警报（“Unbekanner名称”）；
}否则{
this.setState（函数（）{
返回{
人：回复。数据
}
})    
}
}.约束（这个）；
}
render（）{
报税表（
);
}
}

这是我要在其中显示数据的布局组件：

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

导出默认类布局扩展组件{
render（）{
var person=this.props.person
报税表（

{person.name}
{person.types[0].type.name}

);
}
}

如果我尝试启动应用程序，则会出现错误

无法读取未定义的属性“0”

---

我认为这是因为在我通过单击按钮请求数据之前，该组件中没有显示的数据。在我按下按钮之前，我只想显示没有数据的应用程序，然后它应该更新，人是一个对象，对吗？如果是这种情况，您应该在构造函数中将其设置为空对象（而不是字符串），以保持一致性

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

现在，为了只在信息可用时显示信息，并将其保留为空，您需要做的是检查具有信息的person属性（也称为非空对象）

导出默认类布局扩展组件{
render（）{
var person=this.props.person
if（Object.values（person）.length！==0）{
报税表（

{person.name}
{person.types[0].type.name}

);
}
返回null；
}
}

您可以在

渲染功能中使用条件

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

export default class Body extends Component {
constructor(){
    super();
    this.state = {
        persons: [] // This should be an empty array by default
    }
}

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

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


{this.state.person？：null}
理想情况下，您应该映射整个person JSON对象，并提取所需的特定数据

在将person对象作为道具传递给布局组件之前，请使用
map（）
函数对其进行循环

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

export default class Body extends Component {
constructor(){
    super();
    this.state = {
        persons: [] // This should be an empty array by default
    }
}

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

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

导出默认类主体扩展组件{
构造函数（）{
超级（）；
此.state={
persons:[]//默认情况下，此数组应为空数组
}
}
handleSubmit（e）{
getRequest.fetchData（）
.然后（功能（响应）{
如果（response.status==404）{
警报（“Unbekanner名称”）；
}否则{
this.setState（函数（）{
返回{
人员：答复.数据
}
})    
}
}.约束（这个）；
}
render（）{
报税表（
this.state.persons.map（（person，i）=>{
}
);
}
}
因为
person
的初始值是状态值中的
'
，所以要做的一件事是在
Layout
的render方法中进行检查，如下所示：
render（）{if（！Array.isArray（person）return null；return（…other code…）}
这样做的问题是根本没有显示布局（不确定布局是否有其他内容，或者只是一个空白），OP说他想要没有数据的应用程序（这就是为什么我检查布局组件内部）@Rodius是的，同意，但在这种情况下，看起来您的变体将以相同的方式工作。我认为这是不必要的，因为每次API请求都只有一个人。因此，我只需要传递一个对象