Question

可以在react组件中在componentDidMount（）外部使用异步

我有这样的东西

  async componentDidMount() {
    this.props.functionA();
  }

const mapDispachToProps = dispatch => {
  return {
    functionA: () => dispatch(actionCreator.someStuff())
  };
};

export const someStuff= () => async (dispatch) => {
  try {
    const xyz= await callingsomepromise();
    ...

现在，如果我调用functionA在componentDidMount（）的其他地方，它将无法正常工作。我的问题是，如何在其他部分调用functionA，例如单击按钮后。

Answer 1

您可以从事件处理程序中调用它，例如onClick或任何React组件生命周期挂钩，例如componentdidupdate。甚至在构造函数中……

简单地：

class MyComp extends React.Component {
  constructor(props) {
    super(props)
    this.props.functionA();
  }
  componentDidMount() {
    ...
  }

  onClick() {
    this.props.functionA()
  }

  componentDidUpdate(prevProps) {
    if(somecondition) {
      this.props.functionA();
    }
  }

  render() {
    return <div onClick={this.onClick.bind(this)} />;
  }

}

如果您需要等待一些异步操作，例如，只需使用async / await即可。承诺解决。

class MyComp extends React.Component {

  async onClick() {
    await this.props.functionA()
    doSomethingAfter()
  }

  render() {
    return <div onClick={this.onClick.bind(this)} />;
  }

}

编辑-像这样调用redux动作：

import { actionName } from 'actions/myactions';

然后从您的组件中调用它：

class MyComp extends React.Component {
  onClick() {
    this.props.functionA()
  }

  render() {
    return <div onClick={this.onClick.bind(this)} />;
  }
}

然后将功能绑定到您的操作并连接到redux：

const mapDispatchToProps = dispatch => ({
  FunctionA: () => dispatch( actionName() )
});

现在将您的组件连接到您的映射动作和redux存储：

export default connect( mapStateToProps, mapDispatchToProps )( MyComp );

在componentDidMount之外进行异步反应

1 个答案: