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

【问题标题】：Problem mapping an array received from nodejs in React在 React 中映射从 nodejs 接收的数组时出现问题
【发布时间】：2020-08-23 05:40:12
【问题描述】：

我正在尝试在 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 的属性“地图”。

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

有人了解这个问题吗？

编辑：我没有意识到这个问题是关于两个不同的问题。 Norbitrial 的回答解决了有关同步性的问题，但我仍然收到错误消息“对象在 React 子项中无效 [...] 请改用数组”。

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

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

【问题讨论】：

这能回答你的问题吗？ Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference
与您手头的问题无关，但您在服务器上执行的异步功能不正确。它仍然可以工作，但是您的await 不会做任何事情，因为它是一个具有回调函数而不是返回 Promise 的函数。您可以使用 require('utils').promisify 将函数转换为返回 Promise 的函数：nodejs.org/dist/latest-v12.x/docs/api/…

标签： javascript node.js reactjs

【解决方案1】：

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

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

尝试如下：

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

我希望这会有所帮助！

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

问题是您的组件在您收到数据之前就已安装。

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

但一个快速的解决方案是进行条件渲染


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

【讨论】：