Javascript 使用concat更新处于反应状态的数组

我有一个checkbox组件，基本上我想做的是制作一个选中的数组，并将信息发送到api。 但是我在更新状态数组时遇到了问题，无法删除最后插入的对象。 我正在使用concat，结果仍然相同。 以下是整个组件的代码：

import React, { Fragment, Component } from 'react';
import { Inputt, Checkbox } from './style';

interface Istate {
  checked: boolean;
  products?: any[];
}
interface Iprops {
  id: any;
  value: any;
  changeValue?: (checkBoxId: string, value: any) => void;
}
class CheckBoxComp extends Component<Iprops, Istate> {
  state = {
    checked: true,
    products: [] as any,
  };

  addOne = (id: any, checked: any) => {
    let { products } = this.state;
    const newObj = { id, checked };
    products = products.concat(newObj);
    this.setState({ products }, () => {
      console.log(products);
    });
  };

  isChecked = (id: any) => {
    const { checked, products } = this.state;
    const { changeValue } = this.props;
    this.setState({
      checked: !checked,
    });
    if (changeValue) {
      changeValue(id, checked);
    }
    this.addOne(id, checked);
  };

  render() {
    const { id, value } = this.props;
    const { checked, products } = this.state;
    return (
      <Fragment>
        <Checkbox>
          <span />{' '}
          <label className="checkbox-wrapper">
            <span className="display" />
            <Inputt
              type="checkbox"
              value={checked}
              onChange={() => {
                this.isChecked(id);
              }}
            />
            <span className="checkmark" />
          </label>
        </Checkbox>
      </Fragment>
    );
  }
}

export default CheckBoxComp;

import React，{Fragment，Component}来自'React'；
从“./style”导入{input，Checkbox}；
界面状态{
选中：布尔值；
产品？：任何[]；
}
接口Iprops{
id：任何；
价值：任何；
changeValue？：（checkBoxId:string，value:any）=>void；
}
类CheckBoxComp扩展组件{
状态={
核对：对，
产品：[]如有，
};
addOne=（id:any，checked:any）=>{
设{products}=this.state；
const newObj={id，checked}；
products=products.concat（newObj）；
this.setState（{products}，（）=>{
控制台日志（产品）；
});
};
isChecked=（id:any）=>{
const{checked，products}=this.state；
const{changeValue}=this.props；
这是我的国家({
选中：！选中，
});
如果（更改值）{
更改值（id，已选中）；
}
此.addOne（id，已选中）；
};
render（）{
const{id，value}=this.props；
const{checked，products}=this.state；
返回(
{' '}
{
此。已检查（id）；
}}
/>
);
}
}
导出默认CheckBoxComp；

您可以尝试使用spread操作符制作阵列副本的方法：

addOne = (id: any, checked: any) => {
    this.setState((state: Istate): Partial<Istate> => ({
        products: [
            ...state.products,
            { id, checked },
        ],
    }), () => console.log(this.state.products));
};

addOne=（id:any，checked:any）=>{
this.setState（（状态：Istate）：Partial=>({
产品：[
…国家产品，
{id，checked}，
],
})，（）=>console.log（this.state.products））；
};