在复选框上单击两次以更新状态

Question

我正在映射此数组，

array=[
    {'id': 1, 'isActive': true, 'name': apple}, 
    {'id': 2, 'isActive': false, 'name': orange}, 
    {'id': 3, 'isActive': false, 'name': forest}
]

项目的图像之后看起来像这样的输入

<input
    id={item.id}
    type="checkbox"
    onClick={() => handleActive(item)}
    checked={item.isActiveMarket}
/>

当我单击复选框以激活或脱离活性时，我想在项目中更改

，但是该数组应保持完整，而不会删除任何元素的 任何元素功能这是我得到的

const handleActive = (item) => {
    item.isActive = !item.isActive;
};

，但只有当我双击它时

Answer 1

尝试使用Onchange而不是OnClick

Answer 2

使用以下代码：

<input
    id={item.id}
    type="checkbox"
    onChange={() => handleActive(item)}
    checked={item.isActiveMarket}
/>

Answer 3

const initialState = [
    {'id': 1, 'isActive': true, 'name': apple}, 
    {'id': 2, 'isActive': false, 'name': orange}, 
    {'id': 3, 'isActive': false, 'name': forest}
];

const [items, setItems] = useState(initialState);

const onActiveToggle = (id) => {
    const item = items.find(item => item.id === id);

    setItems(prev => prev.splice(prev.indexOf(item), 1, {...item, isActive: !item.isActive}));
}

...
...
<>
  {items.map((item, index) => (
    <input
    key={item.id}
    id={item.id}
    type="checkbox"
    onChange={() => handleActive(item.id)}
    checked={item.isActive}
/>
  ))}
</>

...
...

Answer 4

您需要添加使用效果才能更新状态：

  useEffect(() => {
    // console.log('items useEffect runs')

  }, [items])

Answer 5

似乎反应具有状态同​​步不当行为。添加密钥道具并将其设置为检查状态，这样，您将能够触发渲染。

<input
    id={item.id}
    type="checkbox"
    onClick={() => handleActive(item)}
    checked={item.isActiveMarket}
    key={item.id}
/>