反应复选框没有随机键不会重置？

Question

你好，我有一个复选框组件，看起来像这个

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"
/>

我注意到，如果我不把键＝{Math.random((}放在；重置"；输入没有达到其原始值的状态"；checked back"；这是我通常的场景

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})
}

然而，如果我可能做了一个提取，并且在结果之后，我想像这个一样重置状态

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

输入不会被取消选中，即使状态发生了变化，它也会保持选中状态，除非我把这个键=｛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 }))
}