我正在尝试在 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} />)}
最佳答案
问题是您的后端 API 异步返回结果,因此当您的状态值为 null
时,可能需要几秒钟的时间。
解决方案可以首先检查 null
值,然后在名为 datas
的状态上使用 .map()
和 &&
在您的代码中。
尝试如下:
{datas && datas.map((item) => <p>{item}</p>)}
我希望这有帮助!
关于javascript - 在 React 中映射从 Nodejs 接收的数组时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61666040/