使用 useState 存储来自 useQuery 的数据
Store data from useQuery with useState
我正在使用 React 挂钩来使用 react-apollo
获取 GraphQL 数据并存储本地状态:
const [userData, setUserData] = useState({})
const { loading, error, data } = useQuery(USER_QUERY)
但是,我想知道如何将 data
存储到 userData
。它应该是这样工作的吗:
useEffect(() => {
setUserData(data)
}, [Object.entries(data).length])
看起来你所拥有的可能有效。 options
参数中还有一个 onCompleted
选项可用。它需要一个回调类型:
(data: TData | {}) => void
所以这是另一种方法:
const { loading, error, data } = useQuery(USER_QUERY, {onCompleted: setUserData})
您要如何处理返回的数据,而您无法通过简单地使用从查询挂钩中解构的数据来完成这些数据?在大多数情况下,它可以立即使用,因为它会在重新获取时自行更新。
如果有必要(并且可能是),正如其他答案所说,您发布的 useEffect
挂钩应该可以工作,但我会用简单的 data
替换依赖项,以防止响应具有由不同数据组成且不更新的相同长度的边缘情况:
useEffect(() => {
setUserData(data)
}, [data])
我认为这样的事情会奏效 - 您需要使用 useState 创建初始状态,可以是空数组,然后 useQuery 中的 onComplete 将 setTranscationsData... 它被触发 every render when state or props change
。当然可以在 useState 中添加一个初始状态,它不是一个空数组。
const [transactionsData, setTransactionsData] = React.useState([]);
const { error, data } = useQuery(GET_TRANSACTIONS, {
onCompleted: () => {
setTransactionsData(data.transactions);
},
});
我正在使用 React 挂钩来使用 react-apollo
获取 GraphQL 数据并存储本地状态:
const [userData, setUserData] = useState({})
const { loading, error, data } = useQuery(USER_QUERY)
但是,我想知道如何将 data
存储到 userData
。它应该是这样工作的吗:
useEffect(() => {
setUserData(data)
}, [Object.entries(data).length])
看起来你所拥有的可能有效。 options
参数中还有一个 onCompleted
选项可用。它需要一个回调类型:
(data: TData | {}) => void
所以这是另一种方法:
const { loading, error, data } = useQuery(USER_QUERY, {onCompleted: setUserData})
您要如何处理返回的数据,而您无法通过简单地使用从查询挂钩中解构的数据来完成这些数据?在大多数情况下,它可以立即使用,因为它会在重新获取时自行更新。
如果有必要(并且可能是),正如其他答案所说,您发布的 useEffect
挂钩应该可以工作,但我会用简单的 data
替换依赖项,以防止响应具有由不同数据组成且不更新的相同长度的边缘情况:
useEffect(() => {
setUserData(data)
}, [data])
我认为这样的事情会奏效 - 您需要使用 useState 创建初始状态,可以是空数组,然后 useQuery 中的 onComplete 将 setTranscationsData... 它被触发 every render when state or props change
。当然可以在 useState 中添加一个初始状态,它不是一个空数组。
const [transactionsData, setTransactionsData] = React.useState([]);
const { error, data } = useQuery(GET_TRANSACTIONS, {
onCompleted: () => {
setTransactionsData(data.transactions);
},
});