單擊復選框兩次以更新 state

Question

我正在通過這個數組進行映射

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

在數組的 map 之后，我有一個看起來像這樣的輸入

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

當我單擊復選框以激活或停用時，我想更改項目內部的 isActive，但數組應保持完整而不刪除任何元素

對於 function 這就是我得到的

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來更新 state：

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

  }, [items])