如何使用反应钩子设置多个状态

Question

我在其中一个反应组件中设置多个状态时遇到问题。我的最终目标是：我首先要设置我的"casesData"状态(见下文(，以便在每个后续点击事件中将"selected"的值设置为"true"或"false"。然后，我想通过"casesData"映射以查找"selected： true"的位置，然后将"case"的值添加到"selectedCases"。因此，最终"选择案例"可能看起来像：["case1"，"case2"]，只要它们在"casesData"中各自的对象等于"selected： true"。

我的初始状态设置如下：

const [chosenCases, setChosenCases] = useState([]);
const [casesData, setCasesData] = useState([
{
case: 'Case1',
description: 'some description',
selected: false,
},
{
case: 'Case2',
description: 'some description',
selected: false,
},
]);

我通过映射我的"casesData"状态将内容呈现到屏幕上。然后我从 onClick 调用一个函数来开始更新我的状态：

return (
<>
{casesData.map(
(
casex  // casex because 'case' is a reserved word
) => {
return (
<span
onClick={selectCase}
data-case={casex.case}
>
<p>{casex.case}</p>
<p>{casex.description}</p>
</span>
);
}
)}
</>
);

这是应该更新我的两个状态的函数。

const selectCase = (event) => {
console.log(event.target.getAttribute('data-case'));  // e.g. 'case2'
setCasesData(
[...casesData].map((object) => {
if (
object.case.toLowerCase() ===
event.target.getAttribute('data-case').toLowerCase()
) {
return {
...object,
selected: !object.selected,
};
} else return object;
})
);
let newArray = [];
casesData.map((object) => {
if (object.selected === true) {
newArray.push(object.case.toLowerCase());
}
});
setChosenCases(newArray);
};

如果我在运行上述函数后将我的状态记录到控制台，我看到"casesData"得到正确更新，但"选择案例"总是落后一步。例如，'chosenCases' 在函数的第一次运行时保持为空，但在第二次运行时被设置(例如 ['case2']，但数据将反映之前的函数调用(。

任何帮助将不胜感激。我想知道最合适的设置方法。

Answer 1

最简单的方法是将新casesData存储在变量中，这样您就不必等待新的渲染才能看到新状态：

const selectCase = (event) => {
console.log(event.target.getAttribute('data-case'));  // e.g. 'case2'
const newCasesData = casesData.map((object) => 
(object.case.toLowerCase() === event.target.getAttribute('data-case').toLowerCase())
? {
...object,
selected: !object.selected,
} 
: object
)
setCasesData(newCasesData);
setChosenCases(
newCasesData
.filter(obj => obj.selected)
.map(obj => obj.case.toLowerCase())
);
};

您可能还想重新考虑需要派生状态(如chosenCases(，并只负责在渲染时找出选定的事例。这将使您的代码更容易推理，因为您不必担心两个状态的处置。