模板生命周期方法未呈现

问题描述

我有一个来自 apollo-client 的查询。在我的 componentwillLoad() 生命周期方法中，我可以看到查询正在加载（使用 console.log）。但是我看不到 render() 中的数据。我知道这是由于 Scope 函数的 componentwillLoad()。但是我无法解决这个问题。我想将数据作为 State，以便我可以呈现它。

我的代码如下：

import gql from 'graphql-tag';
import getApolloClient from '../../apollo-client';


const BOOK_LIST = gql(`
   query Books($id: ID!) {
      bookbook(id: $id)  {
            name
            id
            year
            }
        }
  `);

@Component({
  tag: 'book-details',shadow: false,})
export class BookDetails {
  batches: any;
  error: boolean;

  async componentwillLoad() {
    
    const apolloClient = getApolloClient();
    const bookList = await apolloClient.query({
      query: BOOK_LIST,variables:{"id": "230"}
    });
    console.log(activeBatches.data)
    
  }
  
  render() {
  
    return (
      <Host>
      {bookList}
      </Host>
    );
  }
}

解决方法

 private bookList;

async componentWillLoad() {
    
    const apolloClient = getApolloClient();
    this.bookList = await apolloClient.query({
      query: BOOK_LIST,variables:{"id": "230"}
    });
    console.log(activeBatches.data)
    
  }