在数组中推送对象仅返回最后推送的 object 反应

Question

I Know this question to be duplicated, but none of the other answers worked for me... I am trying to push objects to my array using the onChnage method. But every time my array returns the last value, not the full value. I tried so many times to fix this issue. But I can't.

function addVariantSection(data) {
    const handleChecked = (id) => (e) => {
      const tempData1=[];
      const { checkedID } = e.target;
      const vID = e.currentTarget.id.split('-', 1);
      tempData1.push({ productId:itemID, variantId:vID})
      setChecked((values) => ({ ...values, [id]: checkedID, }));
      setVariant([...tempData1]); // variant always give the last value.
    };
    return (
      <Grid key={data._id} container spacing={10}>
        <Grid item xs={12} style={{ justifyContent: 'space-between', display: 'flex' }}>
          <div>{`${data.variant1}-${data.variant2}`}</div>
          {/* eslint-disable-next-line no-useless-concat */}
          <Checkbox id={`${data._id}-` + `checkData`} color="primary" checked={checked[data._id]} onChange={handleChecked(data._id)} />
        </Grid>
      </Grid>
    );
  }

Answer 1

You are overwriting setVariant with the array - tempData1 . So you need to preserve the previous value of setVariant to get the complete array you are expecting.

So do this instead

setVariant((prev) => ([...prev, ...tempData1]));

Your function will look like this:

const handleChecked = (id) => (e) => {
    const tempData1=[];
    const { checkedID } = e.target;
    const vID = e.currentTarget.id.split('-', 1);
    tempData1.push({ productId:itemID, variantId:vID})
    setChecked((values) => ({ ...values, [id]: checkedID, }));
    setVariant((prev) => ([...prev, ...tempData1]));
};

Answer 2

You are simply setting the value of variant as a new array here, which is going to have tempData1 :

setVariant([...tempData1]);

Firstly you need the previous value of variant, so the callback pattern for setState is going to be useful. It gives a reliable value for the previous state always . And using spread ... , simply append the new object at the end.

const handleChecked = (id) => (e) => {
      const { checkedID } = e.target;
      const vID = e.currentTarget.id.split('-', 1);
      setChecked((values) => ({ ...values, [id]: checkedID, }));
      setVariant((variant) => { return [...variant,{ productId:itemID, variantId:vID}]}); // variant always give the last value.
    };

Answer 3

The answers above should be ok, but if you don't want the format where you put a function inside a setState what you can do is:

const [variant, setVariant] = useState([]);

.
.
.

setVariant([...variant, ...tempData1]);