映射从 React 中的 nodejs 接收的数组时出现问题

Question

我正在尝试在 React 代码中使用从 Node 返回的数组。

以下是节点的路由器代码：

router.get('/prodlist', async (req, res) => {

  try {

    await Product.find({}).exec((err, result) => {

      res.status(200).send({ express: result })

    })

  } catch (e) {

    console.log(e)

    res.status(400).send(e)

  }

})

React 的组件代码：

import React, { useState, useEffect } from 'react';

function App() {

  const [datas, setDatas] = useState(null)

  useEffect(() => {

    var curURL = window.location.href

    var calledRoute = curURL.substr(8).substr(curURL.substr(8).indexOf("/"))

    callBackendAPI(calledRoute)

      .then(res => setDatas(prevData => res.express))

      .catch(err => console.log(err));

  }, [])

  async function callBackendAPI(routePath) {

    const response = await fetch(routePath);

    const body = await response.json();

    if (response.status !== 200) {

      throw Error(body.message)

    }

    console.log(body.express)

    return body;

  }

  return (

    <div className="App">

      {{datas}}

    </div>

  )

}

export default App;

以及数组内容（从Chrome的开发人员工具中看到）：

(3) [{…}, {…}, {…}]

  0:

    prodDesc: "Prod1"

    prodID: "1"

    prodImage: "prod1.jpg"

    prodPrice: 350

    prodRebate: 100

    prodReviews: []

    prodStock: 31

    prodThumb: "prod1.jpg"

    __v: 0

    _id: "5eb04a6439eec26af4981541"

    __proto__: Object

  1: {prodID: "2", prodDesc: "Prod2", prodThumb: "prod2.jpg", prodImage: "prod2.jpg", prodPrice: 1500.79, …}

  2: {prodID: "3", prodDesc: "Prod3", prodThumb: "prod3.jpg", prodImage: "prod3.jpg", prodPrice: 280.79, …}

  length: 3

  __proto__: Array(0)

当我执行此代码时，我收到错误：对象作为 React 子级无效

因此，我尝试用如下行来映射数据的内容：

{datas.map((item) => <p>{item}</p>)}

使用映射执行此代码时，我收到错误：无法读取 null 的属性“map”。

虽然数据包含一个数组，但 React 似乎将其视为 null。

有人理解这个问题吗？

编辑：我没有意识到这个问题是关于两个不同的问题。Norbitrial的答案修复了有关同步性的问题，但我仍然收到错误“对象作为React子级无效[...]改用数组”。

EDIT2：通过将映射转发到具有以下行的 REACT 组件解决了该问题：

{datas && datas.map(item => <ShopCart key={item.prodID} item={item} />)}

Answer 1

问题是后端 API 以异步方式返回结果，因此在状态值为 .null解决方案可以先检查值，然后使用代码中调用的 on 状态。null.map()datas&&请尝试以下操作：{datas&nbsp;&&&nbsp;datas.map((item)&nbsp;=>&nbsp;<p>{item}</p>)}

Answer 2

之前运行的代码是从您的api填充的，您需要首先检查以确保它像这样填充。datas{datas&nbsp;&&&nbsp;datas.length&nbsp;&&&nbsp;datas.map((item)&nbsp;=>&nbsp;<p>{item}</p>)}

Answer 3

问题是，在接收数据之前，组件已装入。我会做的（和大多数人）是创建一个加载组件，当数组为空时，它将显示一个微调器或类似的东西，并且在它被填满后，它应该用数据呈现组件。但对此的快速解决方案是进行条件渲染。{datas.length&nbsp;&&&nbsp;datas.map((item)&nbsp;=>&nbsp;<p>{item}</p>)}