Javascript 模具生命周期方法不渲染

我有一个阿波罗客户的问题。在我的

componentWillLoad（）

生命周期方法中，我可以看到正在加载查询（使用

console.log

）。但是我在

render（）

中看不到数据。我理解这是由于

componentWillLoad（）

函数的

Scope

造成的。但是我无法解决这个问题。我想将数据作为

状态

进行渲染

我的代码如下：

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>
    );
  }
}

从“graphql标签”导入gql；
从“../../apollo客户端”导入GetApollo客户端；
const BOOK_LIST=gql(`
查询书籍（$id:id！）{
图书（id:$id）{
名称
身份证件
年
}
}
`);
@组成部分({
标签：“书籍详细信息”，
影子：错，
})
导出类书籍详细信息{
批次：任何；
错误：布尔；
异步组件willload（）{
const apolloClient=getApolloClient（）；
const bookList=wait apolloClient.query({
查询：图书目录，
变量：{“id”：“230”}
});
console.log（activeBatches.data）
}
render（）{
返回(
{bookList}
);
}
}

然后将数据存储在组件状态，而不是局部变量中？您能详细说明一下吗？虽然此代码片段可以解决这个问题，但确实有助于提高文章的质量。请记住，您将在将来回答读者的问题，这些人可能不知道您的代码建议的原因。

 private bookList;

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