javascript - 不明白为什么我收到'Promise {}'

Question

我有一个组件Result，它接受children我getQueryResults通过渲染中的方法运行的道具。getQueryResults搜索 Swifttype API 以根据用户的查询返回搜索结果对象。

我不明白为什么渲染中的 console.log 会记录我的 Promise 仍处于挂起状态，而getQueryResults方法定义中的控制台日志会返回响应对象。我无法访问渲染中 console.log 中子道具（例如 this.props.children.headings）的任何属性，而它仍然具有待处理的承诺状态。

class Result extends React.Component {


  getQueryResults =  (query: any) => {
    return Swiftype.search(query)
      .then((response) => {
        console.log(response);  //<----returns actual object
        return response;
      })
      .catch((err) => {
        console.error(err);
      });
  };

  render() {
    return (
      <PasteCard>
        <Heading as="h2" variant="heading40">
          HEADING HERE
        {console.log( this.getQueryResults(this.props.children))}  // <-- returns Promise {<pending>}. Why?
        </Heading>
        <Paragraph>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dui
          tellus, tristique in tincidunt cursus, efficitur at felis. Phasellus
          imperdiet, lorem et commodo egestas, arcu.
        </Paragraph>
      </PasteCard>
    );
  }
}

我像这样使用 Result 组件

<Result children='hot air balloons' />

标签： javascriptreactjsapicomponentses6-promise