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

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 = () => {

  const firestore = useFirestore();

  const Post = (testTitle, testText) => {

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

      testTitle: testTitle,

      testText: testText

    })

  }

  // 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 = () => {

    const makePost = useCallback(() => {

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

        testTitle: testTitle,

        testText: testText

      })

    }, [testTitle, testText]);

    return (

    <Button

      variant="primary"

      onClick={makePost}

      {/* Avoid inline callback  declaration */}

    >

      POST data

    </Button>

    )

}