Reactjs 反应：组件属性未正确存储我想要的数据（来自查询）

我最近开始学习react，遇到了一些我不理解的事情。因此，当我声明一个组件时，我也在构造函数中声明一个属性。然后，在执行第一个查询（我使用的是Apollo client-GraphQL）之后，我希望将结果（我知道它将始终是一封电子邮件）存储在声明的属性中，以便在第二个查询中将其用作参数

应用程序的逻辑是，我想显示给定电子邮件的所有订单，但首先我会得到带有查询的电子邮件

代码如下：

export default class Orders extends Component {
    constructor(){
        super();
        this.email = '';
      }

    render() {
        return (
            <div>
                <Query query = { GET_MAIL_QUERY }>
                {({data, loading}) => {
                    if (loading) return "Loading...";
                    this.email = data.me.email;
                    return <h1>{this.email}</h1>
                 }}

导出默认类订单扩展组件{
构造函数（）{
超级（）；
this.email=''；
}
render（）{
返回(
{（{data，loading}）=>{
如果（加载）返回“加载…”；
this.email=data.me.email；
返回{this.email}
}}

此时返回了一个包含电子邮件的标题，因此一切正常。但是当我执行第二个查询（或者尝试在第二个标题中显示电子邮件）时，该值似乎没有正确存储

                </Query>
                <h1>{this.email}</h1>
                <Query query = { GET_ORDERS_QUERY }
                variables = {{
                    email: this.email
                }}>
                    {({data, loading}) => {
                        if (loading) return "Loading...";
                        console.log(data);
                        let orders = data.ordersByEmail.data;
                        console.log(orders);
                        return orders.map(order =>
                            <div>
                                <h1>{order.date}</h1>
                                <h1>{order.price}</h1>
                                <h1>{order.conference.conferenceName}</h1>
                                <h1>{order.user.email}</h1>
                                <br></br>
                            </div>)
                    }}
                </Query>
            </div>
        )
    }
}
const GET_MAIL_QUERY = gql`
query getMyMail{
    me{
      email
    }
  }
`;  

const GET_ORDERS_QUERY = gql`
query getOrdersByEmail($email: String!) {
    ordersByEmail(email: $email) {
      data {
        gid
        date
        price
        user {
            email
          }
        conference{
            conferenceName
        }
      }
    }
  }
`;

{this.email}
{（{data，loading}）=>{
如果（加载）返回“加载…”；
控制台日志（数据）；
让orders=data.ordersByEmail.data；
控制台日志（订单）；
返回订单。映射（订单=>
{订单日期}
{订单价格}
{order.conference.conferenceName}
{order.user.email}



)
}}
)
}
}
const GET\u MAIL\u QUERY=gql`
查询getMyMail{
我{
电子邮件
}
}
`;  
const GET\u ORDERS\u QUERY=gql`
查询GetOrdersByMail（$email:String！）{
OrdersByMail（电子邮件：$email）{
资料{
基德
日期
价格
使用者{
电子邮件
}
会议{
会议名称
}
}
}
}
`;

我希望对此有一个解释，也许还有一个解决方案（存储查询返回的值以在另一个查询中使用）

---

感谢期待：）

根据我的经验，您应该使用从

@apollo/react hooks

导入的

useQuery

和功能组件，因为它易于使用，使您的代码更干净

如果您想将

组件与类组件一起使用，则可以。但是，如果您想要存储从服务器接收的数据，您应该在构造函数的状态中创建一个变量，并且当您想要更新到状态时，应该使用

this.setState（{email:data.me.email}）

。不要使用

this.state.email=data.me.email

，它是反模式的，当您使用它更新状态时，React不会触发重新渲染

代码如下：

export default class Orders extends Component {
    constructor(){
        super();
        this.email = '';
      }

    render() {
        return (
            <div>
                <Query query = { GET_MAIL_QUERY }>
                {({data, loading}) => {
                    if (loading) return "Loading...";
                    this.email = data.me.email;
                    return <h1>{this.email}</h1>
                 }}

import React，{useState}来自“React”
从“graphql标记”导入gql
从“@apollo/react hooks”导入{useQuery，useVaritation}
const GET\u MAIL\u QUERY=gql`
查询getMyMail{
我{
电子邮件
}
}
`
const GET\u ORDERS\u QUERY=gql`
查询GetOrdersByMail（$email:String！）{
OrdersByMail（电子邮件：$email）{
资料{
基德
日期
价格
使用者{
电子邮件
}
会议{
会议名称
}
}
}
}
`
常量顺序=（）=>{
const[email，setEmail]=useState（“”）
const{data:getMailQueryData，正在加载，错误}=useQuery（GET_MAIL_QUERY{
未完成：数据=>{
setEmail（data.me.email）
},
onError:err=>警报（err），
})
const{data:getOrdersQueryData}=useQuery（GET_ORDERS_QUERY{
变量：{email:email}，
})
如果（加载）返回加载。。。
如果（错误）返回错误。。。
返回。。。
}

注意：如果您想在这里的帖子中使用标记结构，例如

，请将它们放在backticks（内联代码格式）中，否则它们不会出现。