Реагировать: выполнить некоторую проверку перед рендерингом

#reactjs #rendering

#reactjs #рендеринг

Вопрос:

Есть ли способы реализовать эту идею:

Я хочу выполнить некоторую проверку перед рендерингом. Если проверка верна, чем рендеринг. Но если проверка ложная, то сначала мне нужно сделать setState , и только после рендеринга.

Спасибо.

1. может быть, внутри componentDidMount() {} ?

2. render() {} это не место для setState, вы должны обрабатывать свое состояние в методах жизненного цикла компонента : facebook.github.io/react/docs/react-component.html

3. Вот почему я задал этот вопрос. Мой crome выдает мне ошибку об использовании setState при рендеринге.

Ответ №1:

Я думаю, componentWillMount() это буквально то, что вам нужно, но помещение этого в constructor() может быть лучшим местом для этого.

 class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    if (theCheck() === false) {
      this.state = {
        // ...
      }
    }
  }
}

1. Что такое super? И почему мы используем просто state , а не setState ?

2. super() вызывает исходную функцию конструктора из класса, который вы расширили. В этом случае это вызвало бы конструктор из React.Component . setState() это способ сообщить React, что ему необходимо повторно рендерить компонент, поскольку его состояние изменилось. Если бы вы просто обновили this.state , это не обнаружило бы никакой разницы. Использование this.state в конструкторе допустимо, поскольку компонент еще не был рендерен.

Ответ №2:

Попробуйте сначала отрисовку, затем выполните проверку и измените состояние, когда оно уже отрисовано с помощью componentDidMount() . Не волнуйтесь, это будет так быстро, что ваши глаза не заметят, как это произойдет. Код будет выглядеть следующим образом:

 class MyApp extends React.Component {
  componentDidMount() {
    if (CHECK HERE) {
       this.setState({state : stateValue})
     }
   }
 }