reactjs - 两个组件使用相同的组件

Question

我试图避免项目中的代码重复，因此我决定创建一个其他两个组件可以使用的组件，但它似乎不起作用。它与钩子(Hook)的使用(useEffect)有什么关系还是根本不重要？ 这是代码:

可重用组件:Posts.js

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { makeStyles } from "@material-ui/core/styles";
import CircularProgress from "@material-ui/core/CircularProgress";
import ErrorPage from "../../pages/ErrorPage";
import Post from "./Post";

const useStyles = makeStyles({
  root: {
    margin: "5em",
    textAlign: "center",
  },
  loading: {
    margin: "0 auto",
    marginTop: "50px",
  },
});

export const Posts = ({ action, postsType }) => {
  const classes = useStyles();
  const dispatch = useDispatch();
  const { token } = useSelector((state) => state.auth);

  useEffect(() => {
    dispatch(action(token));
  }, []);

  const { posts, loading, fetched, error } = useSelector(
    (state) => state.posts[postsType]
  );

  return (
    <div className={classes.root}>
      {loading && (
        <CircularProgress
          className={classes.loading}
          size="200px"
          thickness="1"
        />
      )}
      {fetched && posts.map((post) => <Post postData={post} />)}
      {error && <ErrorPage />}
    </div>
  );
};

使用 Posts.js 的组件:

import React from "react";
import { fetchAllPostsByUserId } from "../redux/actions/postsActions";
import { Posts } from "../components/sharedComponents/Posts";

const UserPostsPage = () => (
  <Posts action={fetchAllPostsByUserId} postsType="userPosts" />
);

export default UserPostsPage;

import React from "react";
import { fetchRecommendedPosts } from "../redux/actions/postsActions";
import { Posts } from "../components/sharedComponents/Posts";

const RecommendedUserPostsPage = () => (
  <Posts action={fetchRecommendedPosts} postsType="recommendedPosts" />
);
export default RecommendedUserPostsPage;

这是 redux 存储状态:

const initialState = {
  isPostCreated: false,
  mainPosts: {
    posts: [],
    loading: false,
    fetched: false,
    error: false,
  },
  userPosts: {
    posts: [],
    loading: false,
    fetched: false,
    error: false,
  },
  recommendedPosts: {
    posts: [],
    loading: false,
    fetched: false,
    error: false,
  },
  trendingPosts: {
    posts: [],
    loading: false,
    fetched: false,
    error: false,
  },
};
``

Answer 1

您的选择器检索到错误的结果，这就是为什么我问您这些属性是否填写正确。 这应该有效:

  const { posts, loading, fetched, error } = useSelector(
    (state) => state[postsType]
  );