传递的数组数据作为承诺发送，我如何访问它

Question

我有一个通过mongoose连接到mongoDB的后端。我有一个像这样发送用户数据的控制器

const db = require("../../auth/models");
const User = db.user

const addProduct = (req, res) => {
User.findOne({
username: req.body.username
}, function(err, user) {
if (err) {
res.status(500).send({ message: err })
}else{

user.store.push({

id: req.body.id, 
barcode: req.body.barcode,
productName : req.body.productName,
price : req.body.price,
quantity: req.body.quantity

})
user.save(function(err, newUser) {
if (err) {
res.status(500).send({ message: err });
} else {
console.log(newUser);
res.status(200).send({ message: "Product updated successfully!!"})
}
})
}
})

res.status(200).send({ message: "Product updated successfully!!"})
};
function currentUserStoreData  (req, res)  {
User.findOne({
username: req.body.username
}, function(err, user) {
if (err) {
res.status(500).send({ message: err })
}else{
return( user.store )
}

});

};

const sendProducts = (req, res) => {
console.log(currentUserStoreData );
res.status(200).send(currentUserStoreData )
}
const  inventory = {
addProduct,
currentUserStoreData ,
sendProducts,

};
module.exports = inventory

user.store采用数组的形式 但控制台日志显示为未定义

然后一个路由文件，其中包含一个用于将用户名发送给currentUserStoreData的POST请求，以及一个获取currentUserStoreData返回的数据的GET请求，该数据被sendProductsData捕获，路由看起来像这样

const controller = require("../controller/inventory.controller")
module.exports = function(app) {
app.use(function(req, res, next) {
res.header(
"Access-Control-Allow-Headers",
"x-access-token, Origin, Content-Type, Accept"
);
next();
});
app.post('/api/inventory/currentUser', controller.currentUserStoreData );

app.get('/api/inventory/getProductData', controller.sendProducts)
};

和

有一个服务文件可以像这样处理通过 axios 的路由 从"axios"导入公理;

const user = JSON.parse(localStorage.getItem("user"));
const username = user.username
const API_URL = "http://localhost:8080/api/inventory/";
const addProduct = (id, barcode, productName, price, quantity) => {
return axios.post(API_URL + "additem" , {
username,
id,
barcode,
productName,
price,
quantity,
});
};
const currentUsername = () => {
return axios.post(API_URL + "currentUser" , {
username,
})
}
const fetchProduct = () => {
return axios.get(API_URL + "getProductData")
}
export default {
addProduct,
fetchProduct,
currentUsername
};

当我从另一个文件导入它以映射数组时，我已经导入了服务文件 并像这样使用它

import React from 'react'
import ProductService from "../services/product-service.js"
import Table from 'react-bootstrap/Table'
import {useState, useEffect} from "react";
ProductService.currentUsername();
const createRow = (product) => {
console.log(product);
return (

<tr>
<td>{product.id}</td>
<td>{product.barcode}</td>
<td>{product.productName}</td>
<td>{product.price}</td>
<td>{product.quantity}</td>
</tr>
)
}
const InventoryTable = () => {
const [data, setData] = useState([]);
useEffect(() => {
ProductService
.fetchProduct()
.then(data => setData(data));
}, []);
console.log(data);
return (
<div>
<Table striped bordered hover variant="dark">
<thead>
<tr>
<th>Id</th>
<th>barcode</th>
<th>Product Name</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
{data.map(createRow)}
</tbody>
</Table>
</div>
);
}

export default InventoryTable

现在我被困住了，请帮忙 如果需要，请在评论部分询问

提前感谢您的帮助。

Answer 1

您无法在 React 组件的渲染中访问异步代码，因为渲染是一个完全同步的过程。

您可以访问返回的 Promise，并将结果本地保存到组件中。使用挂载useEffect挂钩访问提取服务并将解析的数据保存到本地状态。将状态映射到行。

import ProductService from "../services/product-service.js"
const InventoryTable = () => {
const [data, setData] = React.useState([]);
React.useEffect(() => {
ProductService
.fetchProduct()
.then(data => setData(data));
}, []);

return (
<div>
<Table striped bordered hover variant="dark">
<thead>
<tr>
<th>Id</th>
<th>barcode</th>
<th>Product Name</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
{data.map(createRow())}
</tbody>
</Table>
</div>
);
};