Реагируйте на запрос API, прежде чем передать реквизит детям - PullRequest
Новая
       16

Реагируйте на запрос API, прежде чем передать реквизит детям

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

У меня есть Parent компонент и Child один, и у меня есть действие, которое запускает некоторые вызовы API в дочернем компоненте, а на componentWillMount я проверяю if условие некоторых props, которые приходят от родителя и делаюткакой-то триггер.Если условие истинно, я запускаю метод, который рендерит новый компонент.Проблема в том, что в дочернем компоненте в componentWillmount значения props this.props.person и this.props.notFound не определены, но мне нужно дождаться запроса API перед рендерингом и проверить этот реквизит.

родитель: 

export class Parent extends Component {

  state = {
    id: this.props.id || ''
  }

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

}

export const mapStateToProps = state => ({
    tagStatus: state.tagAssignment.status,
    persons: state.entities.persons,
)}

дети: 

export class Child extends Component {
  componentWillMount = () => {
         this.props.init(parseInt(this.props.id, 16), this.props.accessToken)
        if (!this.props.notFound && !this.props.person)
            this.props.onNotValidId()

    }

   render = () => {
      return (
         <div>Some body</div>
       )
   }
}

export const mapStateToProps = state => ({
    status: state.tagAssignment.status,
    person: state.entities.persons[state.tagAssignment.assignee],
    accessToken: state.auth.accessToken,
})

export const mapDispatchToProps = dispatch => ({
    init: (id, accessToken) => dispatch(checkId(id, accessToken)),
})

export default compose(
    connect(mapStateToProps, mapDispatchToProps),
)(Child)

1 Ответ

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

Проблема, с которой вы столкнулись, происходит потому, что ваш вызов API происходит асинхронно с методами жизненного цикла реагирования. К тому времени, когда ответ API был возвращен, метод render родительского компонента был вызван в первый раз, который отображал дочерний компонент, который, в свою очередь, вызвал компонент, монтируется с реквизитами, передаваемыми ему родителем, прежде чем они были инициализированы с ответом API. данные. Когда результаты API наконец возвращаются и передаются как новые реквизиты дочернему компоненту (результат повторного рендеринга родителей), он не будет запускать жизненный цикл componentWillMount, поскольку он уже смонтирован.

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

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

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

2) Переместить или продублировать (зависит от того, как вы планируете использовать дочерний компонент) логику инициализации дочерних компонентов из / в другой хук жизненного цикла, такой как componentDidUpdate или getDerivedStateFromProps (В зависимости от версии React, которую вы поете)

...