反应：从MongoDB（使用node.js+；express）向客户端发送对象数组

我正在尝试使用Node.js将从MongoDB获得的对象数组发送到客户端（React.js）。但是，我不断遇到

对象作为React子对象无效（发现：具有键{u id，desc，price，purchased}的对象）

错误，同时我确信我以正确的格式传递了数据

阵列的外观：

[{
          desc:"Manage",
          price: 5000,
          purchased: false,
        },
        {
          desc:"Deliver",
          price: 2000,
          purchased: false,
        },
        {
          desc:"Market",
          price: 4000,
          purchased: false,
        },
        {
          desc:"Agentone",
          price: 8000,
          purchased: false,
        },
        {
          desc:"CPM",
          price: 14000,
          purchased: false,
        },
        {
          desc:"Data",
          price: 17000,
          purchased: false,
        },
        {
          desc:"E-Sign",
          price: 9000,
          purchased: false,
        },
        {
          desc:"IGO",
          price: 3000,
          purchased: false,
        },
        {
          desc:"DocFast",
          price: 7000,
          purchased: false,
        }
      ],

我的服务器端：

app.get('/item_info', (req, res) => {
  var data;
  MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
    if (err) throw err;
    var dbo = db.db("ItemList");
    dbo.collection("ItemInfo").find().toArray(function(err, result) {
      if (err) throw err;
      res.send({express: result})
      db.close();
    });
  });
});

我的客户：

constructor(props){
  super(props)
  this.state={
     itemList:[]
  }
}




componentDidMount() {
        this.callApi()
          .then(res => this.setState({itemList: res.express}))
          .catch(err => console.log(err));

      console.log(this.state.data)
  }

  callApi = async () => {
      const response = await fetch('/item_info');
      const body = await response.json();
      if (response.status !== 200) throw Error(body.message);

      return body;
  };

  render()  {
    return (
      <div>
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Welcome to Reactr</h1>
          </header>
        </div>
        <div>{this.state.itemList[0]}</div>
     </div>
    )}

---

因此，客户端正在获得正确的数组格式。我不明白为什么react对我大喊大叫，你想直接渲染一个对象。正如您通过查看得到的错误所看到的，这是不可能做到的。因此，需要渲染此对象的属性

render() {
  return (
    <div>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to Reactr</h1>
        </header>
      </div>
      <p>{this.state.itemList[0].desc}</p>
      <p>{this.state.itemList[0].price}</p>
      // and so on
    </div>
  );
}

你能告诉我react是如何对你“大喊大叫”的吗？@MattKuhns我遇到了一个错误，它说：

对象作为react子对象无效（找到：带有{u id，desc，price，purchased}键的对象

@MattKuhns，当我试图通过

{this.state.itemList[0].desc}

，它表示

无法读取null的属性0

，因此客户端没有正确地接收数据

此.state.itemList[0]

返回错误

无法读取null的属性“0”

，因此真正的问题是设置状态，其中itemList没有正确地获取数据，而我的问题是如果我执行console.log（res.express），我实际上看到了数据，但是，设置状态没有it@SpencerOvetsky，这是因为数据来自异步操作。在第一次呈现中没有itemList[0]，因此您无法从未定义的

中获取属性。是否尝试过我的代码？如映射，然后呈现项？您可以看到一个这样的属性：
{this.state.itemList[0]&&this.state.itemList[0].desc}
但同样，大多数时候，您希望映射数据，然后以某种方式进行渲染。您也可以再次进行条件渲染。我这样做了。效果很好。除了使用映射之外，还有其他解决方法吗？因为我需要在子组件中使用这些数据，并分别修改单个子组件（不同的样式）。使用
axios
有效吗？在某些情况下，您必须使用
.map
。拥有子组件不会影响这一点，而不是直接渲染，只需将
项
传递给子组件，然后在那里执行任何您想要的操作。
axios
或任何其他获取方法与您的问题无关。您的数据是从后面来的呃，第一次渲染，所以如果您对此有问题，应该执行条件渲染。
render() {
  return (
    <div>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to Reactr</h1>
        </header>
      </div>
      <p>{this.state.itemList[0].desc}</p>
      <p>{this.state.itemList[0].price}</p>
      // and so on
    </div>
  );
}