使用 useState 存储来自 useQuery 的数据答案

【问题标题】：Store data from useQuery with useState使用 useState 存储来自 useQuery 的数据
【发布时间】：2019-12-25 21:00:28
【问题描述】：

我正在使用 React 钩子来获取带有 react-apollo 的 GraphQL 数据并存储本地状态：

const [userData, setUserData] = useState({})
const { loading, error, data } = useQuery(USER_QUERY)

但是，我想知道如何将data 存储到userData。这是它应该如何工作的：

useEffect(() => {
  setUserData(data)
}, [Object.entries(data).length])

【问题讨论】：

标签： javascript reactjs graphql react-hooks react-apollo

【解决方案1】：

看起来你所拥有的可能有效。 options 参数中还有一个onCompleted 选项可用。它需要一个回调类型：

(data: TData | {}) => void

所以这是另一种方式：

const { loading, error, data } = useQuery(USER_QUERY, {onCompleted: setUserData})

【讨论】：

我认为“onCompleted”应该是“onSuccess”。

【解决方案2】：

您要如何处理返回的数据，而这些返回的数据只是通过从查询钩子中解构后无法完成的？在大多数用例中，它可以立即使用，因为它会在重新获取时自行更新。

如果有必要（并且可能），正如另一个答案所说，您发布的useEffect 挂钩应该可以工作，但我会用简单的data 替换依赖项，以防止出现响应的边缘情况由不同数据组成的长度相等且不更新：

useEffect(() => {
  setUserData(data)
}, [data])

【讨论】：

【解决方案3】：

我认为这样的事情会起作用 - 您需要使用 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);
  },
});

【讨论】：