确保React set hook按顺序同步运行

Question

我有一个反应状态，其中包含如下的对象数组{ID: 7, LicenseNumber: 'Testing123', LicenseCreator: 7, added: true}

为了操作这个对象的各个值，我准备了一个如下所示的函数:

const updateLicenseInfo = (index, licenseInfoKey, licenseInfoVal) => {
const foundLicenseInfo = { ...licenseInfo[index] };
const licenseInfoItems = [...licenseInfo];
foundLicenseInfo[licenseInfoKey] = licenseInfoVal;
licenseInfoItems[index] = foundLicenseInfo;
setLicenseInfo([...licenseInfoItems]);
};

我的问题是当我连续运行这个函数两次时，我认为钩子的异步性质只会导致最后一个函数运行。

例如，当我做一个API调用，然后尝试更新ID，那么添加的字段，ID将是空的，但添加将会改变。下面是那个例子:

postData('/api/licenseInfo/createLicenseInfoAndCreateRelationship', {
LicenseNumber,
RequestLineItemID: procurementLine.ID
})
.then((res) => res.json())
.then((r) => {
updateLicenseInfo(licenseIndex, 'ID', r.ID);
updateLicenseInfo(licenseIndex, 'added', true);
})

如何确保这个函数运行，然后下一个函数同步运行

Answer 1

如何重构您的初始函数，以对象数组为参数，结构为{key: "", val: ""}，然后在函数中迭代该数组，将所有值添加到配对键并仅调用setState一次，所有新更改

const updateLicenseInfo = (index, pairs) => {
const foundLicenseInfo = { ...licenseInfo[index] };
const licenseInfoItems = [...licenseInfo];
pairs.forEach((pair)=>{
foundLicenseInfo[pair.key] = pair.value;
});
licenseInfoItems[index] = foundLicenseInfo;
setLicenseInfo([...licenseInfoItems]);
};

并像这样调用

updateLicenseInfo(licenseIndex, [{key:'ID', value:r.ID},
{key:'added', value:true}]);