使用ReactJS中的spread运算符更新属性

Question

好吧，我创建了一个函数来读取一组属性(英语和法语(并验证该属性是否有值。如果它为空，则其状态将更新为"失败"。即使它正确地捕获了空值，但在更新状态属性时也会发生错误。你能告诉我我错过了什么吗？

rowData

rowData={English: "View Database Scope", French: "Afficher la portée de la base de données"}

功能

const statusBodyTemplate = (rowData) => {
const addStatus = { ...rowData, status: "Passed" };
if (!checkEmpty(addStatus.English) || !checkEmpty(addStatus.French)) {      
addStatus = { ...addStatus, status: "Failed" }; <<< Error occurs here.
}
}

错误消息

Uncaught TypeError: Assignment to constant variable.
at Object.statusBodyTemplate [as body] (Test.js:195)
at BodyCell.render (BodyCell.js:394)
at finishClassComponent (react-dom.development.js:17485)
at updateClassComponent (react-dom.development.js:17435)
at beginWork (react-dom.development.js:19073)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at beginWork$1 (react-dom.development.js:23964)
at performUnitOfWork (react-dom.development.js:22776)
at workLoopSync (react-dom.development.js:22707)
at renderRootSync (react-dom.development.js:22670)
at performSyncWorkOnRoot (react-dom.development.js:22293)
at react-dom.development.js:11327
at unstable_runWithPriority (scheduler.development.js:468)
at runWithPriority$1 (react-dom.development.js:11276)
at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
at flushSyncCallbackQueue (react-dom.development.js:11309)
at scheduleUpdateOnFiber (react-dom.development.js:21893)
at dispatchAction (react-dom.development.js:16139)
at Test.js:90

Answer 1

如果您想从statusBodyTemplate()返回值，您可以尝试：

const statusBodyTemplate = (rowData) => {
const addStatus = { ...rowData, status: "Passed" };
if (!checkEmpty(addStatus.English) || !checkEmpty(addStatus.French)) {      
return { ...addStatus, status: "Failed" };
}

return addStatus;
}

Answer 2

试试这个

const statusBodyTemplate = (rowData) => {
let addStatus = { ...rowData, status: 'Passed' };
if (!checkEmpty(addStatus.English) || !checkEmpty(addStatus.French)) {
addStatus = { ...addStatus, status: 'Failed' };
}
return addStatus
};