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

只能在渲染组件时调用挂钩，因此它们必须位于组件的主体中。

export const DataInput = () => {
  const firestore = useFirestore();
  const Post = (testTitle, testText) => {
    firestore.collection('schedule-data').doc('test').set({
      testTitle: testTitle,
      testText: testText
    })
  }
  // etc
}

Answer 2

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

Answer 3

根据您的代码示例，我建议以某种方式在testTitle, testText中提供DataInput，因此您可以使用useCallback创建onClick处理程序。 React将创建用作处理程序的回调，并在testTitle, testText更改后重新创建 only 。

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

解决应用程序中此“无效的挂机呼叫”错误的正确方法是什么？

3 个答案: