映射从 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 && datas.map((item) => <p>{item}</p>)}

Answer 2

之前运行的代码是从您的api填充的，您需要首先检查以确保它像这样填充。datas

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

Answer 3

问题是，在接收数据之前，组件已装入。

我会做的（和大多数人）是创建一个加载组件，当数组为空时，它将显示一个微调器或类似的东西，并且在它被填满后，它应该用数据呈现组件。

但对此的快速解决方案是进行条件渲染。

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