Удаление и добавление элемента React

13 января 2021, 11:40

Есть state:

constructor(props) {
        super(props);
        this.state = {
            Objects: {
                name: '',
                type: '',
                massVariant: [
                    {
                        form: '1',
                        photoUpload: '1',
                        count: '1',
                        countMass: '1',
                    },
                    {
                        form: '2',
                        photoUpload: '2',
                        count: '2',
                        countMass: '2',
                    }
                ]
            },
        }
    }

Есть две кнопки, кликая по одной надо добавлять новый объект с пустыми значениями в massVariant, а кликая по другой удалять.

Я написал эти функции, но почему то ни не работают.

Удаление:

clickDelete = (index) => {
    let newMass = [...this.state.Objects.massVariant];
    newMass.splice(index, 1);
    this.setState({
        massVariant: newMass
    })
}

Добавление:

addRowVar = () => {
    const Objects= [ ...this.state.Objects]
    const element = {
        form: '',
        photoUpload: '',
        count: '',
        countMass: 'tset1'
    }
    const newArray = [ ...Objects.massVariant, element ];
    this.setState({ Objects: newArray });
}

Где я ошибся?

Answer 1

Вы не правильно обновляете стейт

this.setState({ Objects: newArray }); полностью перезапишет ключ Objects, сделав его массивом

Нужно что-то вроде этого:

addRowVar = () => {
    const Objects = { ...this.state.Objects } // это объект, не массив!
    const element = {
        form: '',
        photoUpload: '',
        count: '',
        countMass: 'tset1'
    }
    this.setState({ Objects: {
        ...Objects,
        massVariant: [ ...Objects.massVariant, element ] // а вот это массив
    }});
}