javascript - 处理多个 React 组件之间的 Promise

Question

我在操纵我正在构建的应用程序中的一系列 promise 时遇到了困难。

我的主要组件呈现一个 React 组件 Button，如下所示:

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 调用一个返回 Promise 的函数。

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

我的控制台日志语句“有错误”和“ promise 被拒绝”被记录，但在控制台中，我在 ButtonsList.js 中收到错误:未捕获的类型错误:无法读取未定义的属性“then”。我读过这个错误经常在promise未成功返回时出现，但我不知道我错过了什么。非常感谢任何帮助!

Answer 1

您的 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>