react复选框不会在没有随机密钥的情况下重置？

Question

你好，我有一个checkbox组件，看起来像这样

export default function Checcky({
  lab,
  checcky,
  name,
  className = "",
  onChange,
}) {
  return (
    <div className={"checkky relative flex center-flex " + className}>
      <label htmlFor={name} className="labelin mr-4">
        {lab}
      </label>
      <input
        id={name}
        name={name}
        type="checkbox"
        defaultChecked={checcky}
        onChange={onChange}
        className=" absolute center-absolute"
      />
      <label htmlFor={name} className="slider relative cursor-p"></label>
    </div>
  );
}

我是这样使用它的

       <Checcky
            lab="Admin"
            name="admin"
            key={ Math.random() }
            onChange={handleChange}
            checcky={values.admin}
            className="justify-start my-4"
        />

我注意到，如果我不把key={Math.random()}“重置”为它的原始值，输入就不会被“检查回来”，这是我经常遇到的情况

const [values,setValues] = useState({admin:false})
const handleChange = (e) =>{
  let v = values[e.target.name];
  v = e.target.checked;
  setValues({...values,[e.target.name] : v})
}

但是，如果我这样做，可能是一个fetch，在结果之后，我想要重置状态，如下所示

const postData = async () =>{
  await fetch(somerandomurl)
  setValues({...values,admin:false})
}

输入不会被取消检查，即使状态改变了，它也会保持检查状态，除非我放入这个key={Math.random()}，我知道它是有效的，因为由于键改变了，组件被重新呈现，但是有没有办法在没有这个变通的情况下做到这一点？

Answer 1

试试这些：

使用checked而不是defaultChecked

<input
  id={name}
  name={name}
  type="checkbox"
  checked={checcky}
  onChange={onChange}
  className=" absolute center-absolute"
/>

使用功能状态更新，因为您的新状态依赖于旧状态：

const handleChange = (e) => {
  const { name, checked } = e.target;
  setValues(prevValues => ({...prevValues, [name]: checked }))
}

和

const postData = async () =>{
  await fetch(somerandomurl)
  setValues(prevValues => ({...prevValues, admin: false }))
}