Как корректно изменить состояние React-компонента?

Question

[kamelot43]

В состоянии компонента хранятся данные. Структура у них разная. Как в одном вызове setState можно обновить разные данные: объект и строку? В текущей реализации (просто пример) нужно дважды обновить состояние, чтобы внести данные. Можно проделать все за один вызов setState?

this.setState(prevState => {
      let current = Object.assign({}, prevState.current);
      current.params.from = curFrom;
      current.params.to = curTo;
     
      return { current };
    });

 this.setState({
    datePickerValueFrom: curFrom,
    datePickerValueTo: curTo,
});

Answer 1

[nowm]

Можно так:

const current = Object.assign({}, this.state.current);
current.params.from = curFrom;
current.params.to = curTo;

this.setState({
    datePickerValueFrom: curFrom,
    datePickerValueTo: curTo,
    current,
});

Или так:

this.setState(prevState => {
    const current = Object.assign({}, prevState.current);
    current.params.from = curFrom;
    current.params.to = curTo;

    return {
        current,
        datePickerValueFrom: curFrom,
        datePickerValueTo: curTo,
    };
});

Или я как-то неправильно вопрос понял? Логично ведь, что если нужно вызывать один раз, то нужно просто вызывать один раз, а не два.

Comments

[abberati]

Мутация в

current.params.from = curFrom;
current.params.to = curTo;

[nowm]

abberati, если честно, то пофиг на мутацию (в данном конкретном случае). Реакт использует Object.is, чтобы понять, нужно обновлять состояние или нет, так что ключевой момент здесь в том, что current создаётся с помощью Object.assign на пустой новый объект, и изменение состояния произойдёт в любом случае. Мутация опасна только когда меняются данные в объекте напрямую, потому что из-за этого изменение состояния не поймается и перерисовки после изменения данных не будет.

Лично я вообще такие сложно-составные объекты не использую. Если мне нужно вытащить параметры для чего-то, я их вытаскиваю в тот момент, когда их нужно куда-то отправить, а не держу их наготове в отдельном объекте, потому что тут может не только проблема с мутациями проявляться, но и проблема с задержками обновления состояния, и проблема со слишкой сложной структурой, которая может выкидывать ошибки, из-за которых всё или часть приложения может падать и т.п.

Если бы я писал этот код, мне было бы достаточно хранить в стейте dateFrom и dateTo (и не раздувать стейт дублирующимися вещами), а дальше я бы их вставлял во время рендеринга в datePicker, и использовал бы напрямую в качестве параметров, когда это нужно. Просто, у меня обычно нет столько свободного времени, чтобы разжёвывать людям их ошибки и писать статьи вместо ответов.

Если у людей плохой код — это их проблема, я его улучшать не буду, мне за это не платят, и я не учитель. Так что, немного удивительно, что вы про мутацию мне в первую очередь говорите, а не автору вопроса. Это его подход, а не мой.