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

【问题标题】：Best strategy when dealing with a react-query mutation AND react context处理反应查询突变和反应上下文时的最佳策略
【发布时间】：2021-06-01 05:53:47
【问题描述】：

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

出现问题是因为当用户进行选择时，它会添加到深度嵌套的上下文状态对象中。所以，我喜欢 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，然后“更新状态”...

【问题讨论】：

但由于它是嵌套的，它永远不会“更新”——如果我理解正确的话，你是在直接改变上下文值，而不是每次都返回一个新对象。对吗？

标签： reactjs react-context react-query

【解决方案1】：

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

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

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

这里发生了一些事情：

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

【讨论】：