React getDerivedStateFromProps не может получить доступ к этому

Я использую крючок жизненного цикла getDerivedStateFromProps в последней версии React 16.5.2. Почему я не могу получить доступ к этому объекту для компонента? Я что-то делаю не так?

class EmailInput extends Component {
  state = { email: this.props.defaultEmail };

  handleChangeEvent = event => {
    this.setState({ email: event.target.value });
  };

  getDerivedStateFromProps() {
    this.doSomething();
  }

  doSomething = () => {
   //do something here
  }

  render() {
    return <input onChange = {this.handleChangeEvent} value = {this.state.email} />;
  }
}

Не забудьте добавить static перед getDerivedStateFromProps.

— 03.10.2018 17:36

javascript reactjs

03.10.2018 17:31

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

2 250

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы не можете использовать this для доступа к нестатическому методу. Вам нужно определить статический метод:

static getDerivedStateFromProps() {
    EmailInput.doSomething();
   // ^^ class name
   //OR,
   // this.doSomething(); // accessible, coz doSomething is now static method
}
static doSomething() {
   //do something here
}

Вы можете узнать больше о статическом методе здесь, в mdn docs.

Кроме того, мы используем this.props, this.state для доступа к реквизитам и состояниям соответственно нестатическим методом. Но поскольку getDerivedStateFromProps - статический метод, нам нужно получить доступ из его параметров:

static getDerivedStateFromProps(props, state) {
  // correct
  console.info(props, state)
 // incorrect
 // console.info(this.props, this.state)
 // `this` can be used only for static methods
 // that are inside the class
}

Но как насчет случая, когда нужно вызвать setState сразу после некоторой функции обещания?

— 29.10.2019 07:42

Вы не должны настраивать обещание из этого метода. Это не то, как он предназначен для использования.

— 12.07.2020 08:21

03.10.2018 17:34