在反应应用程序中修复此'Invalid Hook Call'错误的正确方法是什么？

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

根据您的代码示例，我可能会建议testTitle, testText以某种方式在DataInput中可用，因此您可以使用useCallback创建onClick处理程序。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>
)
}