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

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

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

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

它会正常工作。您不能将对象本身放在渲染方法中。

Answer 2

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

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