reactjs - 处理反应查询突变和反应上下文时的最佳策略

Question

我有点问题。我正在为我网站的一个部分使用反应上下文 api。它是每个选择然后调用反应查询突变的形式（我不必进行突变）。

出现问题是因为当用户进行选择时，它会添加到深度嵌套的上下文状态对象中。所以，我喜欢 3 个动作来更新这个深度嵌套的状态.. 即，输入/复选框/下拉菜单......但是在每个动作之后，我需要触发这个突变，然后用价格更新状态......

我在将此 api（突变）集成到此上下文 api 中时遇到问题 ..任何建议..即..

--- user clicks checkbox
------- update context state inside a deeply nested object
----------- ** Need to fire an api WITH this update state (the whole object) **
--------------- response from API updates this state with an updated price

--- user selects dropdown
------- update context state inside a deeply nested object
----------- ** Need to fire an api WITH this update state (the whole object) **
--------------- response from API updates this state with an updated price

出现的问题是，除非我使用这个“深度嵌套对象”，否则我使用 useEffect 进入组件内部的无限循环，但由于它是嵌套的，它永远不会“更新”......所以它只会触发一次。

您更新上下文 api 状态的策略是什么，然后基于该状态触发一个 API，然后“更新状态”......

标签： reactjsreact-contextreact-query

Answer 1

您更新上下文 api 状态的策略是什么，然后基于该状态触发一个 API，然后“更新状态”......

使用 react-query，您将执行useQuery并创建一个包含所有客户端状态（复选框状态、下拉选择等）的 queryKey，例如：

const useSomethingQuery = () => {
  const userInput = useMyContextValue()
  return useQuery(
    ['something', userInput],
    () => fetchSomething(userInput),
    { enabled: !!userInput }
  )
}

这里发生了几件事：

• 每次userInputfrom 上下文更改时，queryKey 都会更改，并且 react-query 将在发生这种情况时触发新请求
• 基本上是该查询的userInput所有“依赖项” - 可以是深度嵌套的对象，不必是引用稳定的，react-query 将处理
• 只要我们没有查询，查询就会被禁用，userInput并且一旦做出第一个选择就会启用。这当然是可选的。
• 您可以在需要数据的任何地方使用该自定义挂钩，因此无需将结果数据放入上下文或任何东西中。