渲染在浏览器中如何反应

Question

我有一个函数可以通过一些 promise 和 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

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

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

Answer 2

如果你说的是真的，对象数组就是 future_users，那么你正在尝试做  {object}  这不会起作用，你需要将它设置为任何属性要显示的对象。例如，如果您的用户有 userName 属性，您可以这样做：

 {this.state.future_users.map(function(item){ return ({item.userName}); })}

它会很好用。您不能将对象本身放在 render 方法中。

How do render react in the browser