ERR：obj 作为反应子无效

Question

我正在使用带有 websocketserver 后端的 create-react-app。我收到错误消息“对象作为 React 子级无效（找到：带有键 {id, status} 的对象）。如果您要呈现子级集合，请改用数组。”

我的后台

          std::string out = "[{\"id\": \"" + Event->getID().asString() + "\",";
          if (auto stateEvent = dynamic_cast<const StateReport*>(Event.get()))
          {
            out += "\"State-Event\": \"";
            out += stateToString(stateEvent->getState());
            out += "\"}]";
          }
          else
            out += "\"Unknown event\": \"\"}]";

          out += "\n";

          objcomm::Data resp;
          resp._data = (const std::uint8_t*)out.c_str();

反应代码

componentDidMount() {
    client.onmessage = (message) => {
      var data = message.data;
      this.setState({dataFromServer: data});
      console.log(message.data);
    };
  }

  render() {
    if(!this.state.dataFromServer){
      return "loading"
    }
    else if(this.state.dataFromServer && this.state.dataFromServer.length >0){
      return(
        this.state.dataFromServer.map(data => (
          {data}
        ))
      );
    }
  }

message.data 的控制台日志

  [{"id": "1.2","State-Event" : "Running"}]

我想访问类似的东西 this.state.datafromServer.map(data => {data.id}) 但是当我这样做时，我得到 datafromServer.map 不是函数

我做错了什么。

Answer 1

很可能，在第一次执行render() 期间，this.state.dataFromServer 的值仍然是undefined，这解释了 “datafromServer.map 不是函数” 错误。

在下一次 render() 执行期间，它应该已经设置（由于 API 已被调用），然后您就可以使用它了。

这是一种很常见的情况。请参阅下面的示例，了解如何处理它：

render() {
  if (!this.state.dataFromServer)
    return <p>Loading...</p>;

  return this.state.dataFromServer.map(item => this.createElement(item));
}

this.createElement 在这里只是一个示例，您可以自行实现它，或者对每个item 执行其他操作。一个非常简单的（入门）实现可能是：

createElement = (item) => <p>id: {item.id}</p>