在react应用程序中修复这个“无效钩子调用”错误的正确方法是什么？
在react应用程序中修复这个“无效钩子调用”错误的正确方法是什么？
提问于 2020-03-23 06:40:15
好吧，我有个错误
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>删除了一些不重要的代码
Stack Overflow用户
发布于 2020-03-23 07:08:07
根据您的代码samle，我可能建议testTitle, testText以某种方式在DataInput中可用，因此您可以使用useCallback创建onClick处理程序。React将创建回调以用作处理程序，并在更改时只重新创建。
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>
)
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60808924
复制相关文章
相似问题
腾讯云开发者
