React：组件属性没有正确存储我想要的数据（来自查询）

Question

最近开始学习react，遇到了一些不懂的地方。所以当我声明一个组件时，我也在构造函数中声明了一个属性。然后，在执行第一个查询（我使用的是 Apollo 客户端 - 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>
                 }}

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

                </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
        }
      }
    }
  }
`;

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

感谢期待:)

Answer 1

根据我的经验，您应该使用从 @apollo/react-hooks 导入的 useQuery 和功能组件，因为它易于使用，它使您的代码更清晰

如果您想将 <Query/> 组件与 class 组件一起使用，没关系。但是，如果你想存储从服务器接收到的数据，你应该在构造函数的状态中创建一个变量，当你想更新状态时，你应该使用 this.setState({email: data.me.email})。不要使用this.state.email = data.me.email，它是反模式，当你使用它来更新你的状态时，React 不会触发重新渲染。

这是代码：

import React, { useState } from 'react'
import gql from 'graphql-tag'
import { useQuery, useMutation } from '@apollo/react-hooks'

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
    }
   }
  }
 }
`

const Orders = () => {
 const [email, setEmail] = useState('')
 const { data: getMailQueryData, loading, error } = useQuery(GET_MAIL_QUERY, {
  onCompleted: data => {
   setEmail(data.me.email)
  },
  onError: err => alert(err),
 })
 const { data: getOrdersQueryData } = useQuery(GET_ORDERS_QUERY, {
  variables: { email: email },
 })

 if (loading) return <div>Loading...</div>
 if (error) return <div>Error...</div>
 return ...
}

React：组件属性没有正确存储我想要的数据（来自查询）

React: An component attribute is not properly storing the data (from a query) that I want

reactjs

apollo

react-apollo

apollo-client