Обработка обещаний среди нескольких компонентов React - PullRequest
Новая
       7

Обработка обещаний среди нескольких компонентов React

0 голосов
/ 27 августа 2018

У меня проблемы с манипулированием серией обещаний в приложении, которое я создаю.

Мой основной компонент отображает кнопку компонента React, например:

ButtonsList.js

<Button
    onClick={() => {
        this.props.onButtonClicked().then(() => {
            console.log(‘got in then’)
        }).catch(() => {
            console.log(‘got in catch’)
        )}
    }
>

Когда кнопка нажата, она вызывает функцию в родительском компоненте onButtonClicked.

PageItems.js

onButtonClicked = () => {
    return this.onSubmit().then((promiseValue) => {
        console.log(promiseValue)
    }).catch((error) => {
        console.log(error);
        console.log(‘promise rejected’);
    });
   }

Родитель onSubmit вызывает функцию, которая возвращает обещание. 

onSubmit = () => {
    errors = this.checkForErrors();
    if (errors) {
        return Promise.reject(‘has errors’);
    } else {
        return Promise.resolve(‘no errors’);
    } 
 }

Мои операторы журнала консоли для «имеет ошибки» и «обещание отклонено» регистрируются, но в консоли я получаю сообщение об ошибке в ButtonsList.js: Uncaught TypeError: Невозможно прочитать свойство 'then' из undefined. Я читал, что эта ошибка часто возникает, когда обещание не возвращено, но я не могу понять, что мне не хватает. Любая помощь с благодарностью!

Ответы [ 2 ]

0 голосов
/ 27 августа 2018

У вас проблема с синтаксисом в компоненте Button. Кроме того, вы ничего не возвращаете во второй функции onButtonClicked. Таким образом, он всегда отбрасывает метод .then. Я возвращаю их сюда. 

class App extends React.Component {
  checkForErrors = () => true;

  onSubmit = () => {
    const errors = this.checkForErrors();
    if ( errors ) {
      return Promise.reject( "has errors" );
    }
    return Promise.resolve( "no errors" );
  }

  onButtonClicked = () => this.onSubmit().then( ( promiseValue ) => {
    console.log( promiseValue );
    return Promise.resolve( promiseValue );
  } ).catch( ( error ) => {
    console.log( error );
    console.log( "promise rejected" );
    return Promise.reject( error );
  } )

  render() {
    return <div><ButtonsList onButtonClicked={this.onButtonClicked} /></div>;
  }
}

const ButtonsList = props => (
  <div>
    <button
      onClick={() => {
        props.onButtonClicked()
          .then( () => {
            console.log( "got in then" );
          } )
          .catch( () => {
            console.log( "got in catch" );
          } );
      }}
    >Click
    </button>
  </div>
);

ReactDOM.render(
  <App />,
  document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
0 голосов
/ 27 августа 2018

Ваш onButtonClick не возвращает никаких обещаний. Вы можете попробовать код ниже, я просто жестко код ошибки, но вы можете попробовать то же самое для успеха. 

        class App extends React.Component {
          constructor(props) {
            super(props);
          }

          onSubmit = () => {
            let errors = true;
            if (errors) {
              return Promise.reject("has errors");
            } else {
              return Promise.resolve("no errors");
            }
          }

          onButtonClicked = () => {
            return this.onSubmit().then((promiseValue) => {
              console.log(promiseValue)
            }).catch((error) => {
              console.log(error);
              console.log("promise rejected");
              return Promise.reject("promise rejected - from promis");
            });
          }

          _onClick = () => {
              this.onButtonClicked().then(() => {
                console.log("got in then");
              }).catch((e) => {
                console.log(e);
                console.log("got in catch");
              })
          }

          render() {
            return (
              <button onClick={this._onClick} />
                );
              }
            }

            const rootElement = document.getElementById("root");
        ReactDOM.render(<App />, rootElement);

код - https://codesandbox.io/s/yjkn761m4z

...