在其他组件中无法访问自定义useEffect挂钩

Question

我正在努力让这个钩子在整个应用程序中都可以恢复。

这个钩子检索posts-api，我希望能够在其他页面上调用这个钩子。

postsHook.tsx

import React, { useEffect, useRef } from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
addContent,
addTitle,
createPostInit,
deleteCommentInit,
initCommentUpdates,
deletePostInit,
dislikePostInit,
getPostsInit,
likePostInit,
notificationInit,
postCommentInit,
} from "../../actions/postActions";
import { getBodyError, getIsNotified, getNotification, getPopPosts, getPosts, getTitleError, getUser, postContent, title } from "./../../selectors/selectors";
const mapDispatchToProps = (dispatch: any) => ({
getPostsInit: () => dispatch(getPostsInit()),
initCommentUpdates: () => dispatch(initCommentUpdates()),
notificationInit: () => dispatch(notificationInit()),
likePost: (id: number) => dispatch(likePostInit(id)),
addTitle: (data: string) => dispatch(addTitle(data)),
addContent: (data: string) => dispatch(addContent(data)),
postCommentInit: (commentData: object) => dispatch(postCommentInit(commentData)),
dislikePost: (id: number) => dispatch(dislikePostInit(id)),
deletePostInit: (id: number, userId: number) => dispatch(deletePostInit(id, userId)),
deleteComment: (id: number, postId: number, userId: number) => dispatch(deleteCommentInit(id, postId, userId)),
createPostInit: (postData: object) => dispatch(createPostInit(postData)),
});
const mapStateToProps = createStructuredSelector({
posts: getPosts(),
popPosts: getPopPosts(),
user: getUser(),
isNotified: getIsNotified(),
titleError: getTitleError(),
bodyError: getBodyError(),
title: title(),
postContent: postContent(),
notification: getNotification(),
});
function PostsHooks(props) {
const didMountRef = useRef<Object>();
React.useEffect(() => {
if (!didMountRef.current) {
props.getPostsInit();
props.initCommentUpdates();
console.log("test");
} else {
console.log("this is component didupdate");
}
}, []); // array prevents an infinite loop
return null;
}
export default connect(mapStateToProps, mapDispatchToProps)(PostsHooks);

我想把这个挂钩称为着陆组件，但我得到了

注意：外来组件是不可调用的。

应为1个参数，但得到了0.ts(2554(索引。d.ts(323，10(：未提供"props"的参数。

我做错了什么？

着陆.tsx

import React, { Fragment, useRef, Component } from "react";
import PostList from "../forms/postList/postList";
import GridHoc from "../hoc/grid";
import Typography from "@material-ui/core/Typography";
import PostsHook from "./../common/postsHook";
function Landing(props) {
const [posts] = PostsHook();
// const didMountRef = useRef<Object>();
// React.useEffect(() => {
//     if (!didMountRef.current) {
//         props.getPostsInit();
//         props.initCommentUpdates();
//         console.log("test");
//     } else {
//         console.log("this is component didupdate");
//     }
// }, []); // array prevents an infinite loop
return (
<Fragment>
<Typography variant="h6" align="left">
Post's from our users
</Typography>
{/* <PostList
likePost={props.likePost}
deletePost={props.deletePostInit}
deleteComment={props.deleteComment}
dislikePost={props.dislikePost}
posts={props.posts}
currentUser={props.user}
postComment={props.postCommentInit}
isNotified={props.isNotified}
getNotifications={props.notificationInit}
notification={props.notification}
/> */}
</Fragment>
);
}
export default GridHoc(Landing);

Answer 1

来自react文档：

自定义Hook是一个JavaScript函数，其名称以"use"开头，可以调用其他Hooks

所以第一步是将命名更改为：

function usePostsHook() {
...
}
const Landing() {
usePostsHook();
...
}

redux中的connect函数用于组件，由于自定义挂钩不是组件，因此不能在那里使用它。幸运的是，redux附带了两个自定义挂钩：useSelector和useDispatch，以提供相同的功能。

使用选择器使用调度

function usePostsHook() {
// getPosts would have to be a fn that takes store and returns posts.
const posts = useSelector(getPosts());
const dispatch = useDispatch();
useEffect(() => {
dispatch(getPostsInit());
dispatch(initCommentUpdates());
}, []);
return [posts];
}
const Landing() {
const [posts] = usePostsHook();
...
}

在API方面，请注意，您正试图从hook返回posts，但挂钩实际上正在返回null