Question

我在构建的应用程序中无法处理一系列的承诺。

我的主要组件呈现一个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'。我已经读过这个错误通常会在以下时间出现。承诺未成功返回，但我无法弄清缺少的内容。任何帮助，不胜感激！

Answer 1

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

Answer 2

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

在多个React组件之间处理承诺

2 个答案: