React-Router useParams 多次带来用户数据

Question

我正在尝试获取特定用户的图像，并且我正在使用 userId 来获取该数据，因此每个用户都有自己的带有嵌套对象的图像，当我单击用户卡时'正在获取与他的图像长度一起显示的用户详细信息，因此如果用户在他的个人资料中有 1 张图像将获得一次详细信息，如果 2 张图像将获得 2 次交易两次并且......

data.json
[
  {
    "creatorName": "Leo Penry",
    "creatorId": "leopenry",
    "location": "USA",
    "bio": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
    "creationsNum": "3",
    "collectionNum": "0",
    "avatar": "https://randomuser.me/api/portraits/men/1.jpg",
    "creations": [
      {
        "id": "0",
        "img": "https://randomuser.me/api/portraits/men/22.jpg",
        "title": "Paradox",
        "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
        "owner": "Hakar",
        "ownerAvatar": "https://randomuser.me/api/portraits/men/3.jpg",
        "priceTez": 15,
        "priceUsd": 187,
        "edition": 1,
        "editions": 2,
        "collection": "My Collection"
      },
      {
        "id": "1",
        "img": "https://randomuser.me/api/portraits/men/4.jpg",
        "title": "Pop",
        "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
        "owner": "Hakar",
        "ownerAvatar": "https://randomuser.me/api/portraits/men/3.jpg",
        "priceTez": 2,
        "priceUsd": 12,
        "edition": 1,
        "editions": 1,
        "collection": "My Collection"
      },
      {
        "id": "2",
        "img": "https://randomuser.me/api/portraits/men/8.jpg",
        "title": "Maistro",
        "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
        "owner": "Hakar",
        "ownerAvatar": "https://randomuser.me/api/portraits/men/3.jpg",
        "priceTez": 8,
        "priceUsd": 66,
        "edition": 1,
        "editions": 4,
        "collection": "My Collection"
      }
    ]
  }
]


UserPageWrapper.js


const UserPageWrapper = (props) => {
  const [artworks, setArtworks] = useState(props.artworks);
  const [isLoading, setIsLoading] = useState(false);
  const { name } = useParams();
  // console.log('hey', useParams());

  useEffect(() => {
    setIsLoading(true);
    props.dispatch(loadArts());
  }, []);

  useEffect(() => {
    if (props.artworks.length > 0) {
      setArtworks(props.artworks);
      setIsLoading(false);
    }
  }, [props.artworks]);

  return (
    <>
      {isLoading ? (
        <div>Loading...</div>
      ) : (
        artworks &&
        artworks
          .filter((art) => art.creatorId === name)

          .map((art) =>
            art.creations.map((item) => (
              <div key={item.id}>
                <UserPage
                  avatar={art.avatar}
                  creatorName={art.creatorName}
                  location={art.location}
                  collectionNum={art.collectionNum}
                  creationsNum={art.creationsNum}
                  bio={art.bio}
                />
              </div>
            ))
          )
      )}
    </>
  )
}

const mapStateToProps = (state) => ({
  artworks: state.artworks,
})

export default connect(mapStateToProps)(UserPageWrapper)

userPage.js

function UserPage({
  avatar,
  creatorId,
  creatorName,
  location,
  collectionNum,
  creationsNum,
  bio,
  img,
}) {
  return (
    <>
      <UserProfileWrapper>
        <UserLeftSide>
          <UserDetails>
            <UserWrapper>
              <img src={avatar} alt="avatar" />
              <UserNameWrapper>
                <h1>{creatorName}</h1>
                <h3>@{creatorId}</h3>
              </UserNameWrapper>
            </UserWrapper>
            <LocationWrapper>
              <LocationIcon /> <p>{location}</p>
            </LocationWrapper>
            <CCWrapper>
              <Collections>
                <p>COLLECTIONS</p>
                <h1>{collectionNum}</h1>
              </Collections>
              <Creations>
                <p>CREATIONS</p>
                <h1>{creationsNum}</h1>
              </Creations>
            </CCWrapper>
            <SocialLinkWrapper>
              <GlobalIcon />
              <TwitterIcon />
              <InstaIcon />
            </SocialLinkWrapper>
            <BioWrapper>
              <p>{bio}</p>
            </BioWrapper>
          </UserDetails>
        </UserLeftSide>

        <UserRightSide>
          <img src={img} alt="" />
        </UserRightSide>
      </UserProfileWrapper>
    </>
  );
}

export default UserPage;

这是结果：

https://i.stack.imgur.com/OyPPG.jpg

Answer 1

这里的问题是您要为每次创建呈现一个 UserPage 组件。我相信您想要做的是根据名称参数呈现一个 UserPage 组件。然后通过对创作的映射来渲染所有用户的艺术图像。因此，在这种情况下，您将在 UserPage 组件内进行映射。