React.js 中未决的意外承诺

Question

我完全不明白为什么会遇到这个问题。对于 Parent 中的第一个 console.log，我验证了输出是正确的，并且 Promise 确实得到了解决。但是当我尝试在 Child 中显示状态内容时，我看到了这个：

Promise {<pending>}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: Array(5)

即使 PromiseValue 正确，Promise 仍未决，尽管在 Parent 中它被视为已解决。这怎么可能？

家长代码：

....
....
....
getElements = async () => {


const elems = await API.askForElements();
console.log(elems) // --> The output is correct!

return elems;
 };


render() {


return (
     <div className="App">
     <Child elemenets={this.getElements()}/>
     </div>
     ); 
     }
    }

儿童代码：

class Child extends React.Component {

 state = {

 elements: this.props.elements
 
 }

 render(){

 console.log(this.state.elements); // It return promise {<pending>}


 ....

Answer 1

您必须等待，直到承诺得到解决。这是一种方法，无需更改大部分代码：

class Child extends React.Component {
  state = { elements: null, error: null }

  componentDidMount() {
    this.props.elements
      .then(elements => this.setState({ elements }))
      .catch(e => this.setState({ error }));
  }

  render() {
    console.log(this.state.error);
    console.log(this.state.elements);

在那个例子中，props.elements 只是（并且永远是）一个 Promise。当该承诺得到解决时，状态将设置为已解决的值（或错误）。

确保您处理了 3 种可能的状态：

Promise 仍在等待中（state.elements 和 state.error 均为 null）；
Promise 已解决（state.elements 不为空）；和
承诺被拒绝（state.error 不为空）。

React.js 中未决的意外承诺

Unexpacted Promise Pending in React.js

asynchronous

undefined

promise

async-await

reactjs