渲染如何在浏览器中做出反应

Question

我有一个函数可以通过一些promises和setState这样：

}).then((future_users) => {
      this.setState({future_users: future_users});
      console.log(this.state.future_users, 'tsf');
    });

这会记录出3个对象的数组 在我的渲染方法中，我有更多的东西

<p><span id="users"></span></p>
{this.state.future_users.map(function(item){
  return (<span>{item}</span>);
})}

然而我收到错误提示Objects are not valid as a React child 我可以把它们转换成字符串吗？

Answer 1

如果你说的是真的，那么一个对象数组就是future_users，那么你试图做<span> {object} <span>它不会工作而你需要将它设置为你想要显示的对象的任何属性。例如，如果您的用户拥有userName属性，则可以执行以下操作：

<p><span id="users"></span></p> {this.state.future_users.map(function(item){ return (<span>{item.userName}</span>); })}

它会正常工作。你不能把对象本身放在render方法中。

Answer 2

您必须检查this.state.future_users是否包含已加载的数据：

{this.state.future_users && this.state.future_users.map(function(item){
  return (<span>{item}</span>);
})}