Асинхронное / ожидающее действие вызова из компонента React - PullRequest
Новая
       11

Асинхронное / ожидающее действие вызова из компонента React

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

У меня есть метод lookupComplete в компоненте реакции, который вызывает действие checkIfAssign, мне нужно дождаться ответа и зависеть от этого триггера ответа в этом методе других методов. Но получите Promise {<pending>} "result". Как ждать, пока не решится это действие?

Компонент: 

export class Test extends Component {
  ....

  lookupComplete = (tagId = this.state.tagId) => 
    this.setState({tagId}, () => {
      let result = this.props
        .checkIfAssign(this.state.tagId, this.props.accessToken)

    result.status 
      ? this.triggerTransition(transitions.ClickCheckTag) 
      : this.triggerTransition(transitions.Test)
    })
}

export const mapDispatchToProps = dispatch => ({
  checkIfAssign: (tagId, accessToken) => 
    dispatch(TagAssignmentActions.checkTagAssignment(tagId, accessToken)),
})

Действие: 

export const checkTagAssignment = (tagId, token) => async dispatch => {
  dispatch({
    type: TagAssignmentActionTypes.TagAssignmentChanged,
  })

  let status, assignee, response
  try {
    response = await DeviceApi.checkTagAssignment(tagId, token)

    assignee = response.result.assignee
    status = response.result.status
  } catch (e) {
    if (e && e.status === httpStatusCode.notFound)
      status = TagStatus.NotFound
  }

  dispatch({
    type: TagAssignmentActionTypes.TagAssignmentChanged,
    status,
    assignee,
    response,
  })
  console.log(response, 'response')
  return response
}

1 Ответ

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

Если вы хотите await, вы должны сделать свою функцию async: 

lookupComplete = async (tagId = this.state.tagId) => 
...

  let result = await this.props
    .checkIfAssign(this.state.tagId, this.props.accessToken)

Однако, это плохая схема .Правильным будет чтение status из состояния вашего приложения.Как вы можете видеть, ваше действие обновит состояние приложения здесь: 

dispatch({
  type: TagAssignmentActionTypes.TagAssignmentChanged,
  status,
  assignee,
  response,
})

Если вы правильно делаете избыточность, ваш компонент Test, вероятно, connect() переведен в избыточность.В вашем mapStatesToProps вы бы передали значение status из состояния приложения в компонент Test props

const mapStateToProps = state => ({
  status: state.myNamespaceForTaskAssignment.status,
});

Затем внутри getDerivedStateFromProps (nextProps, prevState) вы бы сделали проверку на: 

nextProps.status 
  ? this.triggerTransition(transitions.ClickCheckTag) 
  : this.triggerTransition(transitions.Test)

или что-то вроде этого.

...