模具生命周期方法不渲染

Question

我有一个来自 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>
    );
  }
}

Answer 1

 private bookList;

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