[英]Array being filled in inverse in React
我正在尝试用几个对象数组填充一个数组,但是在第一次渲染时,这些值在数组内部被反向填充,并且在刷新它们 go 后恢复到它们应该是的样子。
const getProducts = async (data) => {
await productServices
.getProductsByTakeoffWizardStep(data)
.then((response) => {
setRows((rows) => [...rows, response.data]);
})
.catch((error) => {
console.log(error.response);
});
};
const getTakeoffIDs = () => {
var i = 1;
takeoffServices
.getTakeoffSteps(5)
.then((response) => {
response.data.forEach((element) => {
setSteps((steps) => [...steps, element.description]);
setStepsID((stepsID) => [...stepsID, element.stepID]);
var data = { StepID: element.stepID, TakeoffID: 4 };
getProducts(data);
setStepSequence((stepSequence) => [
...stepSequence,
"Step " + i + "",
]);
i = i + 1;
});
})
.catch((error) => {
console.log(error.response);
});
};
useEffect(() => {
setSteps([]);
setStepsID([]);
setRows([]);
getTakeoffIDs();
}, []);
所以在第一次渲染数组看起来像这样
(2) [Array(1), Array(2)]
0: Array(1)
0: {product: {…}, quantity: null}
length: 1
[[Prototype]]: Array(0)
1: Array(2)
0: {product: {…}, quantity: null}
1: {product: {…}, quantity: null}
length: 2
[[Prototype]]: Array(0)
length: 2
[[Prototype]]: Array(0)
刷新页面后它看起来像这样
(2) [Array(2), Array(1)]
0: Array(2)
0: {product: {…}, quantity: null}
1: {product: {…}, quantity: null}
length: 2
[[Prototype]]: Array(0)
1: Array(1)
0: {product: {…}, quantity: null}
length: 1
[[Prototype]]: Array(0)
length: 2
[[Prototype]]: Array(0)
这可能是什么原因造成的,我能做些什么来解决它?
我正在使用来自另一个页面的 history.push() 访问该页面,但我传递的所有状态都不会影响获取过程,仅显示与我正在获取的数据无关的某些段落。
我会这样写:
const getProduct = async (data) => {
try {
const response = await productServices.getProductsByTakeoffWizardStep(data);
return response.data;
} catch (error) {
console.log(error.response);
}
}
const getTakeoffIDs = () => {
takeoffServices
.getTakeoffSteps(5)
.then(async (response) => {
// try moving setSteps(), setStepsID() and setStepSequence() up here, so they don't wait for the products.
const products = await Promise.all(
response.data.map(element => getProduct({
StepID: element.stepID,
TakeoffID: 4
}))
);
setRows((rows) => [
...rows,
...products
]);
setSteps((steps) => [
...steps,
...response.data.map(element => element.description)
]);
setStepsID((stepsID) => [
...stepsID,
...response.data.map(element => element.stepID)
]);
setStepSequence((stepSequence) => [
...stepSequence,
...response.data((_, i) => `Step ${i + 1}`)
]);
})
.catch((error) => {
console.log(error.response);
});
};
useEffect(() => {
setSteps([]);
setStepsID([]);
setRows([]);
getTakeoffIDs();
}, []);
setState()
s,我会Array.map()
数据并一次添加所有数据。await
所有getProduct()
调用完成并立即推送它们; 为了。 我不确定的一件事是您是否希望setRows()
与另一个 setter 一起调用,或者其他 setRows() 是否应该首先调用 go (因为数据可用)并且setRows()
应该稍后调用,一旦数据可用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.