React中实现复选框状态绑定及解决无限重渲染问题

你写在checked属性里的setLandlord(true)，是组件渲染阶段就会被同步执行的代码，根本没有等待用户点击的触发逻辑。
整个死循环的执行链路非常直接：

1. 组件首次渲染，解析到<Form.Check>这行JSX时，会立刻执行setLandlord(true)，把landlord的状态值改成true
2. 状态值一变，React就会触发组件重渲染
3. 重渲染的时候再次解析这行代码，又会立刻调用setLandlord(true)
4. 回到第2步无限循环，直到React检测到短时间内渲染次数超出安全阈值，抛出“重渲染次数过多”的报错

• 受控组件的checked属性需要传入代表复选框选中状态的布尔值，作用是让UI展示和组件状态完全同步，不是用来放置状态更新函数的位置。setLandlord作为状态更新方法本身没有返回值，就算不触发无限循环，传进去的属性值也是无效的。
• 你同时混用了受控、非受控组件的属性：只有非受控组件才需要用defaultChecked指定初始选中状态，要做状态同步的受控逻辑时，不该同时写defaultChecked和强制的checked绑定，很容易导致组件内部状态混乱。
• 你错误地把复选框的value属性直接绑定到了landlord状态上，复选框的value属性一般用来配置表单提交时附带的标识值，根本不是用来表示选中状态的。

要实现点击复选框同步更新关联状态，必须把状态更新的逻辑放到用户点击触发的onChange回调里，绝对不能在组件渲染的同步流程中直接调用setState：

return (
  <form className="form" onSubmit={handleSubmit}>
    <Form.Group controlId="formBasicCheckbox">
      <Form.Check 
        type="checkbox" 
        label="Are you a landlord?" 
        checked={landlord} 
        onChange={(e) => setLandlord(e.target.checked)} 
      />
    </Form.Group>
  </form>
)

这段逻辑里，只有用户真实点击复选框时，才会触发onChange回调、拿到DOM返回的最新选中值并更新关联状态，再由landlord状态反过来驱动复选框的UI选中态，全程不会在渲染流程中触发状态更新，自然不会出现无限重渲染的问题。

内容的提问来源于stack exchange，提问作者james wisley