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

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

当我单击复选框以激活或停用时，我想更改项目内的 isActive ，但数组应保持完整状态而不删除任何元素

对于这个功能，这就是我得到的

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

来更新状态：

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

  }, [items])

Answer 5

React 似乎存在状态同步错误行为。添加 key 属性并将其设置为选中状态，这样就可以触发渲染了。

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