在反应应用程序中修复此“无效挂钩呼叫”错误的正确方法是什么？

Question

好吧，我有这个错误

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. 

我尝试了很多不同的选项来解决这个问题，但我失败了。

这是我的代码

export const DataInput = () => {

    const Post = (testTitle, testText) => {

            useFirestore().collection('schedule-data').doc('test').set({

                testTitle: testTitle,

                testText: testText

            })

         }

    return(

        <Button 

           variant="primary"

           onClick={()=> Post(testTitle, testText)}>

           POST data

        </Button>

删除了一些无关紧要的代码

Answer 1

Hooks 只能在渲染组件时调用，因此它们需要位于组件的主体中。export const DataInput = () => {&nbsp; const firestore = useFirestore();&nbsp; const Post = (testTitle, testText) => {&nbsp; &nbsp; firestore.collection('schedule-data').doc('test').set({&nbsp; &nbsp; &nbsp; testTitle: testTitle,&nbsp; &nbsp; &nbsp; testText: testText&nbsp; &nbsp; })&nbsp; }&nbsp; // etc}

Answer 2

不要在循环、条件或嵌套函数中调用 Hook。相反，请始终在 React 函数的顶层使用 Hooks。通过遵循此规则，您可以确保每次渲染组件时都以相同的顺序调用 Hook。这就是允许 React 在多个 useState 和 useEffect 调用之间正确保留 Hooks 状态的原因。（如果你好奇，可以在这里找到解释）

Answer 3

根据您的代码示例，我可能会建议testTitle, testText以DataInput某种方式提供，因此您可以使用useCallback. React 将创建回调以用作处理程序，并且仅在testTitle, testText更改时重新创建。import {useCallback} from 'react';export const DataInput = () => {&nbsp; &nbsp; const makePost = useCallback(() => {&nbsp; &nbsp; &nbsp; useFirestore().collection('schedule-data').doc('test').set({&nbsp; &nbsp; &nbsp; &nbsp; testTitle: testTitle,&nbsp; &nbsp; &nbsp; &nbsp; testText: testText&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }, [testTitle, testText]);&nbsp; &nbsp; return (&nbsp; &nbsp; <Button&nbsp; &nbsp; &nbsp; variant="primary"&nbsp; &nbsp; &nbsp; onClick={makePost}&nbsp; &nbsp; &nbsp; {/* Avoid inline callback&nbsp; declaration */}&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; POST data&nbsp; &nbsp; </Button>&nbsp; &nbsp; )}