동일한 구성 요소를 사용하는 두 구성 요소

동일한 구성 요소를 사용하는 두 구성 요소

프로젝트에서 코드 중복을 피하려고 다른 두 구성 요소가 사용할 수 있는 구성 요소를 만들기로 했는데 잘 안 되는 것 같아.후크 사용(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;

다음은 환원 저장소 상태:

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,
  },
};
``

선택기가 잘못된 결과를 검색하고 있어서 이 속성을 올바르게 채웠는지 물어본 겁니다.이기능이작동해야 함:

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

상태 구조에 다음이 없음posts.

네가 데이터에 접근하는 것을 잘못 알고 있는 것 같다.

제발, 이것 좀 먹어봐.

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

참조URL: https://stackoverflow.com/questions/62830958/two-components-using-the-same-component