如何全局访问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

不要在常规 javascript 函数中使用 hook。阅读为什么 here.

我会让 useRegisterQuery 也 return 一个你在按下按钮时调用的 submitForm 函数。

Answer 2

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

要解决此问题，您只需移动挂钩，使其始终指向函数作用域的顶层运行。您可能会看到 similar/the 与控制台错误“渲染的钩子比上一次渲染期间更多的钩子”的相同问题。

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>
)
};

如何全局访问rtk查询功能

How to access rtk query function globally

reactjs

react-native

redux

expo

redux-toolkit