复选框未正确显示复选标记

Question

我有一个反应表单，它使用 useEffect 从本地存储中获取复选框元素的状态。

const [checkbox, setCheckbox] = useState(false);

useEffect(() => {
  setCheckbox(localStorage.getItem('Checkbox Value'))
},[]);

JSX 是

<div className="ui checkbox">
   <input type="checkbox" onChange={handleCheckboxChange} checked={checkbox}</input>
   <label>I agree to the Terms and Conditions: {checkbox}</label>
</div>

当表单呈现正确的值（真、假）时显示在标签中 但无论值是什么，复选框都会显示为选中状态 不知道我错过了什么......

Answer 1

localStorage 总是返回字符串，并且由于“false”（字符串）是一个真实值，所以您的复选框将始终被选中。

将您的代码更改为：

useEffect(() => { 
  setCheckbox(JSON.parse(localStorage.getItem('Checkbox Value') || 'false'))
},[]);