useState 不反映复选框组上第一个选中状态的更改

Question

学习 React 但不明白为什么在这个快速示例中，当我在第一次加载时选中第一个复选框时，它不会更新 useState 属性。如果我使用错误的 useState ，如何正确与多个复选框组交互以可靠地构建选择，我缺少什么？

这里是 Stackblitz 示例

import React, { useState } from 'react';

function CheckboxGroup() {
  const [checkedItems, setCheckedItems] = useState({});

  const handleChange = (event) => {
    setCheckedItems({
      ...checkedItems,
      [event.target.name]: event.target.checked,
    });
    console.log('just checkedItems - ', checkedItems);

    Object.entries(checkedItems).map(([name, isChecked]) => {
      // fails on the first selection
      console.log(`${name ? name : 'wtf'} is ${isChecked}`);
    });
  };

  const checkboxes = [
    { name: 'checkbox1', label: 'Checkbox 1' },
    { name: 'checkbox2', label: 'Checkbox 2' },
    { name: 'checkbox3', label: 'Checkbox 3' },
  ];

  return (
    <div>
      {checkboxes.map((checkbox) => (
        <label key={checkbox.name}>
          <input
            type="checkbox"
            name={checkbox.name}
            checked={checkedItems[checkbox.name] || false}
            onChange={handleChange}
          />
          {checkbox.label}
        </label>
      ))}

      <p>Checked items:</p>
      <ul>
        {Object.entries(checkedItems).map(
          ([name, isChecked]) => isChecked && <li key={name}>{name}</li>
        )}
      </ul>
    </div>
  );
}

export default CheckboxGroup;

我期待 onChange 能够可靠地更新 useState...

Answer 1

据我了解您遇到的问题，您误解了 useState 的工作原理。

简单来说，当你setState时，它会是异步的，当你在setState下面登录时，它不会立即有新值，只有当组件在setState之后重新渲染时，你才会得到新值。

有 2 种方法可以让您立即记录新值：

• 带回调的setState：登录回调
• useEffect：登录useEffect，无需依赖数组