Проблема: Я пытаюсь изменить только один элемент из данных плана с помощью this.setState({ planData: { id: plan }});, но при этом все мои другие элементы становятся неопределенными. Я нашел обходной путь, добавив все остальные элементы в свой setState, но это совсем не выглядит хорошо. Есть ли способ изменить только один элемент из planData без необходимости устанавливать все остальные одновременно.

Пример кода:

class Pricing extends Component {
    constructor() {
        super();
        this.state = {
             planData: {
                 id: 3,
                 price: 0,
                 vpnEnabled: false,
                 cloudEnabled: false,
                 cloudSpace: 0
             }
        };
    }

    planHandler(plan) {
        this.setState({ planData: { id: plan }});
    }

    render() {
        <div>
             <button onClick={() => this.planHandler(2)}>Submit</button>
        </div>
    }
}
2
Vysp3r 11 Окт 2021 в 18:40

3 ответа

Лучший ответ

Вы можете распространить существующее состояние, чтобы сохранить существующие значения.

planHandler(plan) {
    const data = this.state.planData
    this.setState({ planData: { 
       ...data, 
       id: plan 
    }});
}
2
Vincent Ramdhanie 11 Окт 2021 в 15:44

Доступ к planData из состояния с помощью this.state.planData

Вам нужен оператор распространения - ....

planHandler(plan) {
        this.setState({ planData: { ...(this.state.planData),  id: plan }});
    }

Разрывы разворота открывают ключи и свойства объекта. Поскольку приведенный выше код приведет к двойному нажатию клавиши id, код, расположенный позже, переопределяет первый.

1
Tushar Shahi 11 Окт 2021 в 15:44

Вы можете использовать оператор распространения, чтобы сделать что-то вроде

planHandler(plan) {
    this.setState({ planData: {...this.state.planData, id: plan }});
}

Это сохранит другие значения без изменений при обновлении того, что нам нужно обновить.

0
Omkar Joshi 11 Окт 2021 в 15:44