如果将复选框的checked属性设置为null或undefined，则会出现问题。
这些在JS中是一个“错误”的值，但是React treats a value of null as if the property was not set根本不存在。由于复选框的默认状态是未选中的，所以一切都很好。如果你把checked设置为true，React会认为这个属性突然出现了！这是React认为你从不受控制切换到受控制的时候，因为现在checked这个属性存在了。
在您的示例中，可以通过将checked={this.settings[setting]}更改为checked={!!this.settings[setting]}来消除此警告。（!!）。它们会将null或undefined转换为false（而不去管true），因此React将使用false值注册checked属性，并从一个受控表单组件开始。
我也遇到过这个问题，我也读了几遍关于受控组件的文档，但都没有用，但我终于弄明白了，所以我想我应该分享一下。另外，由于version 15.2.0的正常输入是通过设置value来触发控制的，而复选框是通过设置checked来初始化控制的，不管它们的value属性是什么，这就增加了一点混乱。

Amoebe的答案是正确的，但我认为有一个比double bank（!!）更简洁的解决方案，只需为Checkbox组件的checked prop添加一个值为false的defaultProps属性即可：

import React from 'react';

const Checkbox = ({checked}) => (
  <div>
      <input type="checkbox" checked={checked} />
  </div>
);

Checkbox.defaultProps = {
  checked: false
};

export default Checkbox;

基本上，defaultChecked意味着你不想控制输入--它只是用这个值渲染，然后就没有办法控制它了。另外，不应该使用value，而应该使用checked，所以你的第二个代码应该是正确的。而且你不应该同时使用它们。

<input
    type="checkbox"
    checked={this.state.checked}
    onChange={this.onChangeAction.bind(this)}
/>

你能对这种行为做些小小的调整吗？

如果您选择将类组件转换为函数组件，那么这里是使用钩子的答案...

export default Checklist = () => {
  const [listOfItems, setListOfItems] = useState([
    {name: 'bubbles', isChecked: true},
    {name: 'gregory', isChecked: false}
  ]);

  const updateListOfItems = (itemIndex, newsChecked) => {
    const updatedListOfItems = [...listOfItems];
    updatedListOfItems[itemIndex].isChecked = isChecked;
    setListOfItems(updatedListOfItems);
  }

  return (
    {listOfitems.map((item, index) =>
      <index key={index} type="checkbox" checked={item.isChecked} onChange={() => updateListOfItems(index, !item.isChecked)} />
    )}
  )
}

您可以将数据分配给状态，然后使用与单个复选框关联的checked属性将状态设置为

{   this.state.data.map(function(item, index) {
      return (
        
        <input type="checkbox" checked={item.value} onChange={this.handleChange.bind(this, index)}/>
        
      );
    }.bind(this))
    }

状态中的样本数据为

data: [{name:'bubbles', value: true}, {name:'gregory', value: false}]

JSFIDDLE

结合其他答案，最后奏效的是：

const [categories, setCategories] = useState(
    [
        {
            field: 'Label 1',
            checked: true
        },
        {
            field: 'Label 2',
            checked: false
        },
        {
            field: 'Label 3',
            checked: false
        }
    ]
)
const updateList = (item, isChecked) => {
    const updatedList = [...categories];
    updatedList[item].checked = isChecked;
    setCategories(updatedList);
}
... in your markup:
{
  categories.map((item, index) =>
    <div key = {item.field}>
      <label>
        <span>{item.field}</span>
        <input key={index}
               type="checkbox"
               checked={item.checked}
               onChange={() => updateList(index, !item.checked)}
         />
      </label>
    </div>
  )
}