При использовании getDerivedStateFromProps (React) возникает ошибка: невозможно прочитать свойство 'setState' из null

Question

Итак, мы только что узнали, что componentWillReceiveProps устарело, и нам нужно использовать метод жизненного цикла getDerivedStateFromProps.https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

Я использую его как показано ниже:

class Main extends Component {
  static getDerivedStateFromProps(props) {
    console.log('getDerivedStateFromProps', props);
    const { modal } = props;
    this.setState({ modal });
  }

  constructor(props) {
    super(props);

    this.state = {
      modal: {}
    };
  }

Однако это ошибка на setState

main.js: 30 Uncaught TypeError: Невозможно прочитать свойство 'setState' из null в getDerivedStateFromProps (main.js: 30)

Что мне здесь не хватает?

Answer 1

Вы используете это в контексте статического метода.Статика не полагается на экземпляр класса, поэтому это не то же самое.Лучше всего вернуть модальный нестатический метод, а затем установить его оттуда: D

class Main extends Component {
  static getDerivedStateFromProps(props) {
    console.log('getDerivedStateFromProps', props);
    const { modal } = props;
    return modal;
  }

  constructor(props) {
    super(props);

    this.state = {
      modal: {}
    };
    
    SetModalState(modal)
    {
      this.setState(modal)
    }
  }

Answer 2

Помимо уже отмеченной ошибки (вам нужно вернуть состояние), ваша реализация содержит ошибки и не будет работать правильно.

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

Похоже, вы должны полностью удалить getDerivedStateFromProps и просто использовать реквизиты напрямую.В этом примере вам вообще не нужно локальное состояние.

Для более глубокого понимания , почему этот шаблон нарушен, и некоторых простых альтернатив ему, посмотрите официальныйРеагировать на сообщение в блоге о том, как избежать получения состояния .

Answer 3

Поскольку getDerivedStateFromProps является функцией static, экземпляр отсутствует (this).

Вместо этого эта функция предназначена для того, чтобы вы возвращали свое состояние вместо использования this.setState.

static getDerivedStateFromProps(props) {
    console.log('getDerivedStateFromProps', props);
    const { modal } = props;
    return { modal };
  }