来自 React 组件的异步/等待调用操作答案

【问题标题】：Async/await call action from React component来自 React 组件的异步/等待调用操作
【发布时间】：2018-10-22 00:44:51
【问题描述】：

我在反应组件中有一个方法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
}

【问题讨论】：

请修正缩进，代码难以阅读。
“我在反应组件中有一个调用动作的方法”。请指定方法的名称，使其非常明确。 “但收到 Promise {} 结果”。请说明问题出在哪里。

标签： javascript reactjs react-redux ecmascript-2017

【解决方案1】：

如果你想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()ed 到 redux。在您的mapStatesToProps 中，您会将status 的值从应用程序状态传递给Test 组件props

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

然后在getDerivedStateFromProps(nextProps, prevState) 中检查：

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

或者类似的东西。

【讨论】：