У меня есть компонент 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) ={amp}gt; void; } class CheckBoxComp extends Component{amp}lt;Iprops, Istate{amp}gt; { state = { checked: true, products: [] as any, }; addOne = (id: any, checked: any) ={amp}gt; { let { products } = this.state; const newObj = { id, checked }; products = products.concat(newObj); this.setState({ products }, () ={amp}gt; { console.log(products); }); }; isChecked = (id: any) ={amp}gt; { 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 ( {amp}lt;Fragment{amp}gt; {amp}lt;Checkbox{amp}gt; {amp}lt;span /{amp}gt;{' '} {amp}lt;label className="checkbox-wrapper"{amp}gt; {amp}lt;span className="display" /{amp}gt; {amp}lt;Inputt type="checkbox" value={checked} onChange={() ={amp}gt; { this.isChecked(id); }} /{amp}gt; {amp}lt;span className="checkmark" /{amp}gt; {amp}lt;/label{amp}gt; {amp}lt;/Checkbox{amp}gt; {amp}lt;/Fragment{amp}gt; ); } } export default CheckBoxComp; 

Вы можете попробовать этот подход, который использует оператор распространения, чтобы сделать копию массива:

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