Javascript ReactJS-如何从多个道具阵列渲染出组件？

我试图通过构建一个简单的web应用程序来学习ReactJS，该应用程序对模拟api进行几个ajax调用，并将结果呈现到页面上

到目前为止，我可以通过适当使用componentDidMount成功地对模拟api进行ajax调用。响应文本是一个JSON对象，我在其中以状态存储多个数组，例如：

var newTitle = this.state.title.slice();
newTitle.push(myObject[x].title);
this.setState({title:newTitle})

var newBody = this.state.body.slice();
newBody.push(myObject[x].body);
this.setState({body:newBody})

myObject是存储已解析JSON响应的对象

我可以通过执行以下操作成功渲染一个数组（即标题）：

<FeedController title={this.state.title}/>

class FeedController extends Component{
  render({
    return(
      {this.props.title.map(function(element,i){
        return <FeedItem title={element} />
      })}
    );
  });
}

class FeedItem extends Component{
  render({
    return(
      <div>
      Title: {this.props.title}
      </div>
    );
  });

类FeedController扩展组件{
渲染({
返回(
{this.props.title.map（函数（元素，i）{
返回
})}
);
});
}
类FeedItem扩展组件{
渲染({
返回(
标题：{this.props.Title}
);
});

我循环浏览标题状态，并在每次迭代中显示一个提要项。然而，我的问题是如何从几个道具数组中渲染出一个组件？例如，我希望标题[1]与正文[1]一起显示，等等

我假设我会做一些事情，将标题和正文作为道具传递，但我无法解决如何映射两者并呈现结果。理想情况下，我的FeedItem组件将如下所示：

class FeedItem extends Component{
  render({
    return(
      <div>
      Title: {this.props.title}
      <br />
      Body: {this.props.body}
      <br /><br />
      </div>
    );
  });
}

类FeedItem扩展组件{
渲染({
返回(
标题：{this.props.Title}


正文：{this.props.Body}



);
});
}

如果知道数组的长度相同，可以使用相同的索引获取匹配数据

<FeedController title={this.state.title} body={this.state.body}/>

class FeedController extends Component{
  render({
    return(
      {this.props.title.map(function(element,i){
        return <FeedItem title={element} body={this.props.body[i]} />
      })}
    );
  });
}

class FeedItem extends Component{
  render({
    return(
      <div>
      Title: {this.props.title}
      <br />
      Body: {this.props.body}
      <br /><br />
      </div>
    );
  });
}

类FeedController扩展组件{
渲染({
返回(
{this.props.title.map（函数（元素，i）{
返回
})}
);
});
}
类FeedItem扩展组件{
渲染({
返回(
标题：{this.props.Title}


正文：{this.props.Body}



);
});
}

或者，您可以在将数据传递到FeedController之前合并数据

render(){
    let data = this.state.title.map( (title, i) => {
        return {
            title: title,
            body: this.state.body[i]
        }
    }
    return <FeedController data={data} />
}

class FeedController extends Component{
  render({
    return(
      {this.props.data.map( (data,i) => {
        return <FeedItem title={data.title} body={data.body} />
      })}
    );
  });
}

class FeedItem extends Component{
  render({
    return(
      <div>
      Title: {this.props.title}
      <br />
      Body: {this.props.body}
      <br /><br />
      </div>
    );
  });
}

render（）{
让data=this.state.title.map（（title，i）=>{
返回{
标题:标题,，
body:this.state.body[i]
}
}
返回
}
类FeedController扩展组件{
渲染({
返回(
{this.props.data.map（（数据，i）=>{
返回
})}
);
});
}
类FeedItem扩展组件{
渲染({
返回(
标题：{this.props.Title}


正文：{this.props.Body}



);
});
}

这是一个与我以前见过的问题非常相似的问题。请查看问题和答案：^2。您真正需要考虑的是如何将多个数组合并到一个数据集中。然后您可以使用与上述相同的逻辑。到目前为止，我已经尝试了第一种方法，但我仍在努力。我无法使用创建道具FeedController中的现有prop/state，即return不起作用。我得到的错误是“无法读取未定义的属性'props'”啊，这是因为您需要使用胖箭头函数或将map函数绑定到此

.map（（a，b）=>{}）或
.map（函数（a，b，）{}）。绑定（this）