反应:组件属性没有正确存储我想要的数据(来自查询) [英] React: An component attribute is not properly storing the data (from a query) that I want
问题描述
我最近开始学习react，遇到了一些我不明白的事情.所以当我声明一个组件时，我也在构造函数中声明了一个属性.然后，在执行第一个查询(我使用 Apollo 客户端 - GraphQL )后，我想将结果(我知道这将始终是电子邮件)存储在声明的属性中，以便我可以将其用作第二个查询中的参数.
应用逻辑是我想显示给定电子邮件的所有订单，但首先我会收到带有查询的电子邮件.
代码如下:
export default class Orders extends Component {构造函数(){极好的();this.email = '';}使成为() {返回 (<div><查询查询 = { GET_MAIL_QUERY }>{({数据，加载}) =>{if (loading) return "Loading...";this.email = data.me.email;返回 <h1>{this.email}</h1>}}此时返回包含电子邮件的标题，所以一切都很好.但是当我执行第二个查询(或尝试在第二个标题中显示电子邮件)时，似乎该值没有正确存储.
</Query><h1>{this.email}</h1><查询查询 = { GET_ORDERS_QUERY }变量 = {{电子邮件:this.email}}>{({数据，加载}) =>{if (loading) return "Loading...";控制台日志(数据)；让订单 = data.ordersByEmail.data;控制台日志(订单)；返回 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>)}}</查询>)}}const GET_MAIL_QUERY = gql`查询 getMyMail{我{电子邮件}}`;const GET_ORDERS_QUERY = gql`查询 getOrdersByEmail($email: String!) {ordersByEmail(email: $email) {数据 {吉德日期价钱用户{电子邮件}会议{会议名称}}}}`;
我希望对此有一个解释，也许是一个解决方案(存储从查询返回的值以在另一个中使用它)
期待中的感谢:)
根据我的经验，你应该使用从 @apollo/react-hooks 导入的 useQuery 和功能组件因为它易于使用，它使您的代码更干净
如果您想将 this.setState({email: data.me.email}).不要使用 this.state.email = data.me.email，这是反模式，当你使用它更新状态时，React 不会触发重新渲染.
这是代码:
import React, { useState } from 'react'从'graphql-tag'导入gql从@apollo/react-hooks"导入 { useQuery, useMutation }const GET_MAIL_QUERY = gql`查询 getMyMail {我 {电子邮件}}`const GET_ORDERS_QUERY = gql`查询 getOrdersByEmail($email: String!) {ordersByEmail(email: $email) {数据 {吉德日期价钱用户{电子邮件}会议 {会议名称}}}}`const 订单 = () =>{const [email, setEmail] = useState('')const { 数据:getMailQueryData，加载，错误 } = useQuery(GET_MAIL_QUERY, {onCompleted: 数据 =>{setEmail(data.me.email)},onError: 错误 =>警报(错误)，})const { 数据:getOrdersQueryData } = useQuery(GET_ORDERS_QUERY, {变量:{电子邮件:电子邮件}，})if (loading) return <div>Loading...</div>如果(错误)返回错误...返回 ...}
I recently started learning react and I have encountered something that I do not understand. So when I declare a component I also declare an attribute in the constructor. Then, after executing the first query (I am using Apollo client - GraphQL ) I want to store the result (which I know that will be always an email) in the attribute declared so I can use it as a parameter in the second query.
The app logic is that I want to show all the orders of a given email, but first I get the email with a query.
Here is the code:
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>
}}
At this point a header containing the email is returned, so all good. But when I execute the second query (or try to display the email in the second header for that matter) it seems that the value is not properly stored.
</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
}
}
}
}
`;
I would love an explanation for this and maybe a solution (to store a value returned from a query to use it in another)
Thanks in anticipation :)
In my experience, you should use useQuery imported from @apollo/react-hooks with functional component because it's easy to use, it makes your code more cleaner
If your want to use <Query/> component with class component, it's ok. But, if you want to store data received from server, you should create a variable in state of constructor and when you want to update to state, you should use this.setState({email: data.me.email}). Don't use this.state.email = data.me.email, it's anti-pattern, React will not trigger re-render when you use it to update your state.
This is the code:
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 ...
}
这篇关于反应:组件属性没有正确存储我想要的数据(来自查询)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
