使用相同组件的两个组件答案

【问题标题】：Two components using the same component使用相同组件的两个组件
【发布时间】：2020-07-10 09:09:58
【问题描述】：

我试图在我的项目中避免代码重复，所以我决定创建一个其他两个组件可以使用的组件，但它似乎不起作用。它与钩子的使用（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,
  },
};
``

【问题讨论】：

那么问题出在哪里？
@Apostolos 它不会渲染所有组件，只有一个
@Apostolos 我想知道这种可重用性在反应中是否可以接受
那么这些{ posts, loading, fetched, error } 填充成功了吗？
能否提供redux状态的数据模型？

标签： reactjs react-redux react-hooks

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你的状态结构没有posts。

您似乎在访问数据时出错了。

请试试这个

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

【讨论】：