使用 react useState 挂钩从数组更新状态

Question

目前我正在使用具有键值的状态。我通过遍历数组并在每个循环中设置状态来从数组更新该状态。所有这些逻辑都发生在从文本输入的 onChange 事件调用的函数中。

在文本框中仅键入字母“c”的预期输出是状态中的两个参数发生变化。每个以“c”开头的 Key 的值为 false，应将其切换为 true。

实际输出只有一个键值改变

数组：

const unitList = [
    "cru",
    "co",
    "vr",
    "lr",
    "sr",
    "tg",
    "tra",
    "dh",
    "pl",
    "kh",
    "nh",
  ];

状态：

const [optionList, setOptionList] = useState({
    cru: false,
    co: false,
    vr: false,
    lr: false,
    sr: false,
    tg: false,
    tra: false,
    dh: false,
    pl: false,
    kh: false,
    nh: false,
  });

用户在onChange触发该函数的输入框输入

const onSearchType = (e) => {
    var inputText = e.target.value.toUpperCase();
    unitList.forEach((unit, index) => {
      if (unit.substring(0, inputText.length).toUpperCase() === inputText)
        setOptionList({ ...optionList, [unit]: true });
    });
  };

如果用户在文本框中键入字母 c，我希望状态值 return 所有以 c 开头的项目都是真实的，因此状态看起来像这样

cru: true,
co: true,
vr: false,
lr: false,
sr: false,
tg: false,
tra: false,
dh: false,
pla: false,
kh: false,
nh: false,

Answer 1

您的代码的问题是 setOptionList({ ...optionList, [unit]: true }); 此调用是异步的。它会不断覆盖 optionList。因此，如果您将一个单元设置为 true，由于调用中的 {...optionList}，下一次调用会将所有其他单元设置回其初始值。

要修复，请使用 optionList 的克隆对象并更新它

const clone = { ...optionList };

 const onSearchType = (e) => {
    var inputText = e.target.value.toUpperCase();
    const clone = { ...optionList };
    unitList.forEach((unit, index) => {
      if (unit.substring(0, inputText.length).toUpperCase() === inputText)
        clone[unit] = true;
    });
    setOptionList(clone);
  };

https://codesandbox.io/s/mystifying-proskuriakova-6x4bxn?file=/src/App.js:0-975

使用 react useState 挂钩从数组更新状态

Updating state from an array with react useState hook

reactjs

react-hooks

use-state