Reactjs 使用useState钩子连续地基于上一个状态进行更新

我正在尝试启用按钮，如果两个复选框都选中，则表示我没有工作状态

我已经添加了功能的唯一关键。请查看非工作演示的链接

    import React, { useState } from 'react';
    import { render } from 'react-dom';

    function App (){
      const [checked, toggleCheckbox] = useState({ checkbox1: false, checkbox2: false, disabled: true });
      const getDisabled = (state) => {
         if (state.checkbox1 || state.checkbox2) {
           return false;
         } else if (!state.checkbox1 && !state.checkbox2) {
           return true;
         } else {
           return true;
         }
       };
       const handleCheckbox = (checkbox) => {
        toggleCheckbox({
            ...checked,
            [checkbox]: !checked[checkbox],
            disabled: getDisabled(checked)
        });
        console.log(checked);
    };
    const checkDisable = checked.disabled ? 'disabled' : ''
    return (
      <div>
        <div>
           <label>
               <input
                    type="checkbox"
                    className="filled-in"
                    onChange={() => handleCheckbox('checkbox1')}
                    checked={checked.checkbox1}
                />
                <span className="black-text">Checkbox1</span>
            </label>
        </div>
        <div>
            <label>
                <input
                    type="checkbox"
                    className="filled-in"
                    onChange={() => handleCheckbox('checkbox2')}
                    checked={checked.checkbox2}
                />
                <span className="black-text">checkbox2</span>
            </label>
        </div>
        <div>
            <a className={checkDisable} href="#!">
                Next Step
            </a>
        </div>
   </div>
  );
}
render(<App />, document.getElementById('root'));

import React，{useState}来自“React”；
从'react dom'导入{render}；
函数应用程序（）{
const[checked，toggleCheckbox]=useState（{checkbox1:false，checkbox2:false，disabled:true}）；
const getDisabled=（状态）=>{
if（state.checkbox1 | | state.checkbox2）{
返回false；
}如果（！state.checkbox1&！state.checkbox2），则为else{
返回true；
}否则{
返回true；
}
};
常量handleCheckbox=（复选框）=>{
切换复选框({
…检查，
[复选框]：！选中[复选框]，
禁用：getDisabled（已选中）
});
控制台日志（选中）；
};
const checkDisable=checked.disabled？“disabled”：”
返回(
handleCheckbox（'checkbox1'）}
checked={checked.checkbox1}
/>
复选框1
handleCheckbox（'checkbox2'）}
checked={checked.checkbox2}
/>
复选框2
);
}
render（，document.getElementById（'root'））；

功能应如下所示：

仅当选中两个复选框时，才应启用该按钮

取消选中任何复选框时，应禁用该按钮

---

您只需检查两个复选框值的状态即可

  const isDisabled = !(checked.checkbox1 && checked.checkbox2)
  const checkDisable = isDisabled ? 'disabled' : ''

不需要在其他地方改变

叉式闪电链接。

---

回答问题。

---

嘿，成功了！我可以在日志中看到，在第一个复选框{checkbox1:false，checkbox1:false，disabled:false}中单击第二个复选框{checkbox1:true，checkbox1:false，disabled:false}后，状态比实例的更新状态低一步

您看到过时状态的原因是，状态更新程序

toggleCheckbox

会批量更新，因此您需要检查更新状态，以监控更新状态

---

复选框的动态数量。 我已经更新了堆栈以跟踪复选框的动态数量

新叉子~

看起来像这样。

函数应用程序（）{
常数长度=6；
1.️⃣ 生成初始复选框状态-这可防止非受控组件错误。
const initialcheckbox=数组
.from（{length}，（u，i）=>i+1）
.reduce（（acc，id）=>（acc[id]=false，acc），{}）
const[checked，toggleCheckbox]=useState（初始复选框）；
常量[isDisabled，setIsDisabled]=useState（false）
const handleCheckbox=id=>{
切换复选框（上一个=>({
以前的
[id]：！上一个[id]
}));
};
2.️⃣ 选中复选框后更新禁用状态。
useffect（（）=>{
嘿，成功了！我可以在日志中看到，在第一个复选框{checkbox1:false，checkbox1:false，disabled:false}中单击第二个复选框{checkbox1:true，checkbox1:false，disabled:false}后，状态比实例的更新状态低一步您正在记录过时的状态，因此会记录过时的值。我正在使用两个useStates现在更新此链接！您可以检查吗？@lost_in_magento您实际上不需要另一个状态
disabled
，来跟踪禁用状态。您只需使用“computed”值
const isDisabled=！（checked.checkbox1&&checked.checkbox2）
要启用/禁用“下一步”。@lost\u in\u magento我已经创建了另一个输入复选框的动态版本。请签出更新的回复和在线评论。