Проверка componentWillMount на undefined до разрешения запроса API - PullRequest
Новая
       15

Проверка componentWillMount на undefined до разрешения запроса API

0 голосов
/ 11 мая 2018

У меня есть компонент, который запускает некоторые методы, которые зависят от асинхронного запроса API.Я использую componentWillmount, чтобы проверить некоторые реквизиты.Если этот параметр равен true, я запускаю некоторую функцию, в противном случае - false.Но проблема в том, что в первый раз опора undefined, только через некоторое время она станет false или true.Как это проверить и дождаться разрешения запроса?

componentWillMount = () => {
  this.props.init(parseInt(this.props.tagId, 16), this.props.accessToken);
  if (!this.props.notFound && !this.props.person) this.props.onFreeTag();
};

Ответы [ 2 ]

0 голосов
/ 11 мая 2018

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

class Parent extends React.Component {
    constructor() {
        this.state = {0}
    }

    render() {
        <Child value={this.state.value} />
    }
}

Как вы можете видеть, изначально у состояния нет свойства value, поэтому Child получит undefined для * 1007.*.Он получит не undefined, только когда какая-либо родительская функция изменит его следующим образом: 

class Parent extends React.Component {
    constructor() {
        this.state = {0}
    }

    onAction() {
        this.setState({value: true})
    }

    render() {
        <Child value={this.state.value} />
    }
}

Так что, если по какому-либо событию родительский вызов вызовет его OnAction, он изменит состояние, и Child получит this.props.value какtrue но поскольку Child будет уже обработан, componentWillMount ловушка не сработает, а componentWillReceiveProps.Поэтому, если вы хотите использовать опору в componentWillMount, убедитесь, что она была передана при первом рендере дочернего элемента, и, если это невозможно, используйте componentWillReceiveProps для обработки реквизита

0 голосов
/ 11 мая 2018

Используйте componentWillReceiveProps функцию жизненного цикла, что-то вроде: 

componentWillReceiveProps = (nextProps) => {
    if (!nextProps.notFound && !nextProps.person)
        nextProps.onFreeTag()
    }
}
...