无效的挂钩调用.钩子只能在函数组件的主体内部调用，当其他函数工作时

Question

我有存储方法，我用它来替换redux容器。我遇到的问题是它不执行这个函数，所有其他函数都像编辑评论、喜欢帖子等一样工作。

storeMethods().createPost(postData);

错误：挂钩调用无效。钩子只能在 函数组件的主体。这可能发生在其中一个 原因如下：

storeHooks.tsx

import usePostsHook from "./postsHook";
import useNotificationHook from "./notificationHook";
import { useDispatch, useSelector } from "react-redux";
import { likePostInit, dislikePostInit, deletePostInit, createPostInit, addTitle, addContent, deleteCommentInit, editCommentInit, postCommentInit } from "../../actions/postActions";
import { getIsNotified, getUser, getBodyError, getTitleError, postContent, title } from "../../selectors/selectors";
function useStoreMethods() {
const dispatch = useDispatch();
const [posts] = usePostsHook();
const [notifications] = useNotificationHook();
const isNotified = useSelector(getIsNotified());
const user = useSelector(getUser());
const likePost = (id: number) => dispatch(likePostInit(id));
const dislikePost = (id: number) => dispatch(dislikePostInit(id));
const deletePost = (id: number, userId: number) => dispatch(deletePostInit(id, userId));
const deleteComment = (id: number, postId: number, userId: number) => dispatch(deleteCommentInit(id, postId, userId));
const postComment = (commentData: object) => dispatch(postCommentInit(commentData));
const editComment = (commentData) => dispatch(editCommentInit(commentData));
const createPost = (postData: object) => dispatch(createPostInit(postData));
const ourTitle = useSelector(title());
const titleError = useSelector(getTitleError());
const ourBodyError = useSelector(getBodyError());
const ourPostContent = useSelector(postContent());
return {
posts,
notifications,
user,
isNotified,
likePost,
dislikePost,
deletePost,
deleteComment,
postComment,
editComment,
createPost,
ourTitle,
titleError,
ourBodyError,
ourPostContent,
};
}
export default useStoreMethods;

我像这样使用它

Dashboard.tsx

import React, { Fragment } from "react";
import PostForm from "../forms/createPost/createPost";
import GridHoc from "../hoc/grid";
import OurTabs from "../tabs/OurTabs";
import { InputHook } from "../common/handleHook";
import usePostsHook from "./../common/postsHook";
import Grid from "@material-ui/core/Grid";
import { useDispatch, useSelector } from "react-redux";
import { createPostInit, addTitle, addContent } from "../../actions/postActions";
import { getBodyError, getTitleError, postContent, title } from "../../selectors/selectors";
import storeMethods from "./../common/storeHooks";
function Dashboard(props: any) {
const dispatch = useDispatch();
const inputData = {
addTitle: (data: string) => dispatch(addTitle(data)),
addContent: (data: string) => dispatch(addContent(data)),
};
const { handleInputChange } = InputHook(inputData);
const ourTitle = storeMethods().ourTitle;
const titleError = storeMethods().titleError;
const ourBodyError = storeMethods().ourBodyError;
const ourPostContent = storeMethods().ourPostContent;
const onSubmit = (e: any) => {
e.preventDefault();
const postData = { ourTitle, ourPostContent };
console.log(postData);
storeMethods().createPost(postData);
};
const isEnabled = titleError === true && ourBodyError === true ? false : true;
console.log("fffgg", props);
return (
<Fragment>
<Grid justify="center" container={true}>
<Grid item={true} lg={9} xs={11}>
<PostForm
title={ourTitle}
postContent={ourPostContent}
handleTitleChange={handleInputChange}
handleContentChange={handleInputChange}
onSubmit={onSubmit}
disButton={isEnabled}
titleError={titleError}
bodyError={ourBodyError}
/>
</Grid>
</Grid>
<br />
<OurTabs />
</Fragment>
);
}
export default GridHoc(Dashboard);
// will be useful for unit testing.
export { Dashboard as DashboardComponent };

Answer 1

这是因为您在onSubmit体内调用钩子，而不是在函数组件的顶层调用钩子(请参阅钩子规则(。

请尝试：

....
const ourPostContent = storeMethods().ourPostContent;
const { createPost } = storeMethods();
const onSubmit = (e: any) => {
e.preventDefault();
const postData = { ourTitle, ourPostContent };
console.log(postData);
createPost(postData);
};

我在这里使用了解构模式，因为我认为它可能更适合您的用例，但您也可以随意以以前的方式编写它。