复选框的值不会改变 React

Question

我正在对我的产品进行过滤，此时我有两个复选框，一个是保修，另一个是安装，我的 onChange 方法是这样的：

const [data, setData] = useState({
        install: false,
        warranty: false
})

const handleInputChanges = (e) => {
        const { name, type, checked, value } = e.target;
        const eachValue = type === 'checkbox' ? checked : value;

        setData({
            ...data,
            [name]: eachValue
        })
        console.log(data)
}

输入是这样的：

<FormControlLabel
         name="install"
         control={
         <Checkbox
                  name="install"
                  onChange={handleInputChanges}
                  color="primary"
                  value={data.install}
         />
         }
         label="Instalación"
/>
<FormControlLabel
         name="warranty"
         control={
         <Checkbox
                  name="warranty"
                  onChange={handleInputChanges}
                  color="primary"
                  value={data.warranty}
         />
         }
         label="Garantía"
/>

问题是当我点击复选框时，值没有改变，要改变它我必须按两次，但值与复选框不一致。示例：复选框处于活动状态（视觉上），但在值中它返回 false，反之亦然。两种输入都会发生这种情况。

Answer 1

将控制台放在handleInputChanges 之外以获取最新状态值

对于on input Change 事件的最佳实践，请传递state name 和state value，以便您可以在handleChange 函数中轻松使用！

这是我的代码，请检查

function App() {
  const [data, setData] = useState({
    install: false,
    warranty: false
  })

  const handleInputChanges = (name, value) => {
    setData({ ...data, [name]: value });
  }
  console.log(data)

  return (
    <div>
      <FormControlLabel
        name="install"
        control={
          <Checkbox
            name="install"
            onChange={(e) => handleInputChanges('install', e.target.checked)}
            color="primary"
            value={data.install}
          />
        }
        label="Instalación" />

      <FormControlLabel
        name="warranty"
        control={
          <Checkbox
            name="warranty"
            onChange={(e) => handleInputChanges('warranty', e.target.checked)}
            color="primary"
            value={data.warranty}
          />
        }
        label="Garantía" />
    </div>
  );
};
export default App;)

Answer 2

当像这样更新状态时，你不应该直接访问旧状态：

setData({
   ...data,
   [name]: eachValue
})

你最好这样做：

setData(data => ({
   ...data,
   [name]: eachValue
}))

您可以将我的回答与@mayur-vaghasiya 先生的回答结合起来。