javascript - 在 React 中映射从 Nodejs 接收的数组时出现问题

Question

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

这是 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>)}

使用 map 执行此代码时出现错误:无法读取 null 的属性“map”。

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

有人了解这个问题吗？

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

EDIT2:通过使用以下行将映射转发到 REACT 组件来解决问题:

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

Answer 1

问题是您的后端 API 异步返回结果，因此当您的状态值为 null 时，可能需要几秒钟的时间。

解决方案可以首先检查 null 值，然后在名为 datas 的状态上使用 .map() 和 && 在您的代码中。

尝试如下:

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

我希望这有帮助!