асинхронный вне компонента DidMount в реакции - PullRequest
Новая
       60

асинхронный вне компонента DidMount в реакции

1 голос
/ 16 марта 2019

Может ли в реагирующем компоненте асинхронное использоваться вне componentDidMount ()

У меня есть что-то вроде этого 

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

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

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

Теперь, если я вызываю функцию в другом месте для componentDidMount (), это не работает. У меня вопрос, как я могу вызвать функцию A в других частях, например, после нажатия кнопки.

1 Ответ

1 голос
/ 16 марта 2019

Вы можете вызвать его из обработчика событий, например, 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)} />;
  }

}

РЕДАКТИРОВАТЬ - вызвать редукционное действие, как это: 

import { actionName } from 'actions/myactions';

Затем вызовите его из вашего компонента: 

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

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

Затем привяжите функцию к своему действию и подключитесь к редуксу: 

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

Теперь подключите ваш компонент к сопоставленному действию и хранилищу редуксов: 

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