Как в React правильно задать начальное состояние из props?

Question

[miniven]

Есть список в store Redux. Я этот список вывожу в компоненте, могу изменить порядок элементов и при нажатии «сохранить» записать изменения в store. Соответственно, нужно, чтобы промежуточное состояние списка (когда изменен порядок, но изменения еще не сохранены) хранилось в состоянии компонента, как я понимаю. Но для этого мне нужно это состояние изначально задать в компоненте. Вот как это сделать, ведь просто задать состояние из props — неправильно.

Answer 1

[Антон Спирин]

Почему неправильно-то? Главное чтобы при изменении порядка элементов, состояние обновлялось иммутабельно.
А задавать полученное состояние если используете в проекте React версии ниже 16.3 можно примерно так:

const computeDerivedState = props => ({
  someData: props.someData,
});

class Example extends Component {
  state = {
    ...computeDerivedState(this.props),
    someState,
  };
  
  componentWillReceiveProps(nextProps) {
    if (nextProps.someData !== this.props.someData) {
      this.setState(computeDerivedState(nextProps));
    }
  }
}

Если используете в проекте React ˆ16.3, то вместо componentWillReceiveProps и computeDerivedState используйте getDerivedStateFromProps и прочитайте эту статью.

Comments

[yanis_kondakov]

Из любопытства, почему не использовать getDerivedStateFromProps в этом случае?

[Антон Спирин]

yanis_kondakov, можно. Но далеко не все проекты перешли на React ˆ16.3. В примере используется функция для безболезненного перехода на getDerivedStateFromProps. Добавлю к ответу.

[yanis_kondakov]

Антон Спирин, спасибо за объяснение