Добавление значения в массив состояний приводит к замене предыдущего значения - ловушки React

Question

Я пытаюсь добавить новые значения из флажка в массив состояний через onchange. Но это значение заменяет предыдущее.

  const [checked, setCheck] = useState([]);

  const changeCheck = (event,sku) =>{
    event.preventDefault();
    setCheck(prevChecked => [...prevChecked,sku]);
  } 


  return(
  <input type="checkbox" checked={checked.includes(props.details.sku)} onChange={(event) => changeCheck(event,props.details.sku)}/>
  )

Хотите добавить значение props.details.sku в проверенный массив состояний. Новые значения добавляются в массив, но старые значения заменяются также означает, что массив состояний остается длины 1.

Answer 1

Для обновления состояния флажка необходимо использовать предыдущее состояние и решить, нужно ли добавлять или удалять значение флажка

Также используйте обратный вызов обновления состояния для обновления состояния

const [checked, setCheck] = useState([]);

  const changeCheck = (event,sku) =>{
    event.preventDefault();

    setCheck(prevChecked => {
        if(prevChecked.includes(sku)) {
           // checkbox was checked previously so uncheck it
           return prevChecked.filter(i => i !== sku);
        } else {
           // check the checkbox i.e add the id in array
           return [...prevChecked, sku]
        }
    });
  } 


  return(
      <input type="checkbox" checked={checked.includes(props.details.sku)} onChange={(event) => changeCheck(event,props.details.sku)}/>
  )