向 state 数组添加一个值会导致替换以前的值 - React hooks

Question

我试图通过 onchange 将新值从复选框添加到 state 数组。 但是该值替换了以前的值。

  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 值添加到选中的 state 数组中。 新值被添加到数组中，但旧值被替换也意味着 state 数组的长度仍然为 1。

Answer 1

为了更新复选框 state 您需要使用以前的 state 并决定是否需要添加或删除复选框值

还使用 state 更新程序回调来更新 state

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