时间戳

首页 > 解决方案 > 来自 React 组件的异步/等待调用操作

javascript - 来自 React 组件的异步/等待调用操作

问题描述

我lookupComplete在 react 组件中有一个调用 action的方法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
}

标签： javascriptreactjsreact-reduxecmascript-2017

解决方案

如果你想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,
})

如果您正确地执行 redux，则您的Test组件可能已被connect()编入 redux。在您的应用程序状态中，mapStatesToProps您将值传递给组件statusTestprops

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

然后在getDerivedStateFromProps(nextProps, prevState)你会做检查：

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

或者类似的东西。

推荐阅读