如何全局访问rtk查询功能

Question

我使用RTK查询，并且想要注册。

如果用户单击提交，则按钮应命名为“isLoading...”。

那么我该怎么做呢？

所以我无法从 useRegisterQuery 访问 isLoading，如果我将它放在函数之外，那么它会直接操作

const Register = () => {
const [input, setInput] = useState('');

 const submitForm = () => {
     const { data, error, isLoading } = useRegisterQuery();
 }

return (
  <View>
    <TextInput value={input} onChangeText={(e) => setInput(e)} />
    
    <Pressable>
      <Text>{isLoading ? 'isLoading' : 'Register'}</Text>
    </Pressable>
  </View>
)
};

Answer 1

您不能根据操作有条件地/以编程方式调用挂钩，例如提交表单按钮。与 Alvar 的建议类似，请参阅 https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level 了解规格。

要解决此问题，您只需移动挂钩，以便它始终在函数作用域的顶层运行。 您可能会看到类似/相同的问题，并出现控制台错误“渲染的钩子数量比上一次渲染期间的钩子数量多”。

const Register = () => {
const [input, setInput] = useState('');
const { data, error, isLoading } = useRegisterQuery();

 const submitForm = () => {

   // Do whatever with data, error, isLoading ect
 }

return (
  <View>
    <TextInput value={input} onChangeText={(e) => setInput(e)} />
    
    <Pressable>
      <Text>{isLoading ? 'isLoading' : 'Register'}</Text>
    </Pressable>
  </View>
)
};

编辑：添加这篇文章来揭秘反应钩子以及为什么它们有这样的规则。 tl;dr，钩子存储在一个数组中，如果我们在重新渲染之间没有以相同的顺序获取它们，我们最终可能会引用另一个对象（即不同的 useState 等） https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e

Answer 2

不要在常规 javascript 函数中使用 hook。请阅读此处的原因。

我会让 useRegisterQuery 也返回一个 SubmitForm 函数，您可以在按下按钮时调用该函数。