我在迭代中遇到了困难，它显示出完美的结果，但当我在加载时在组件级别上渲染时，它加载在同一个字段上，但最后一个对象加载

Question

我在加载时被困在渲染组件级别。当我单击编辑并调用编辑函数时，它会在控制台中正确加载数据并显示所有对象，但不会在页面级别上呈现。

这是我的代码：

const handleEdit = async () => {
const { searchBrand } = await searchBrandAPI({ id });
searchBrand[0].translations.forEach(arrVal => {
console.log(arrVal, 'arrVal');
setDynamicValues([ ...dynamicValues, {
transLanguage: { label: arrVal.language, value: arrVal.languauge },
transName: arrVal.name,
transIsActive: { label: formatFirstCharUpperCase(arrVal.isActive, String), value: arrVal.isActive },
}]);
}); 
const strIsActive = { label: formatFirstCharUpperCase(searchBrand[0].isActive, String), value: searchBrand[0].isActive }
setValues({ name: searchBrand[0].name, isActive: strIsActive })
}

Answer 1

我用这种方式解决了它。

const handleEdit = async () => {
const { searchBrand } = await searchBrandAPI({ id });
const transData = [];
searchBrand[0].translations.forEach(arrVal => {
transData.push({
transLanguage: { label: arrVal.language, value: arrVal.languauge },
transName: arrVal.name,
transIsActive: { label: formatFirstCharUpperCase(arrVal.isActive, String), value: arrVal.isActive },
});
});
setDynamicValues(transData);
const strIsActive = { label: formatFirstCharUpperCase(searchBrand[0].isActive, String), value: searchBrand[0].isActive }
setValues({ name: searchBrand[0].name, isActive: strIsActive })
}

这是正确的路吗？因为我尝试了备忘录和回调，但同样的东西显示得和上次记录一样，甚至在控制台上也显示得很完美！请确认，如果我以正确的方式这样做，或者有其他最短的方法来解决这个问题吗？

Answer 2

为了保证获得state的最新值，需要使用useStatecallback函数来获得之前的值。

const handleEdit = async () => {
const { searchBrand } = await searchBrandAPI({ id });
searchBrand[0].translations.forEach(arrVal => {
console.log(arrVal, 'arrVal');
setDynamicValues(prev => [ ...prev, {
transLanguage: {
label: arrVal.language,
value: arrVal.languauge
},
transName: arrVal.name,
transIsActive: {
label: formatFirstCharUpperCase(arrVal.isActive, String),
value: arrVal.isActive
},
}]);
}); 
const strIsActive = {
label: formatFirstCharUpperCase(searchBrand[0].isActive, String),
value: searchBrand[0].isActive
}
setValues({ name: searchBrand[0].name, isActive: strIsActive })
}

由于setState是一个异步操作，所以当您调用setDynamicValues时，dynamicValues的值不会立即更新。