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 组件。我相信您想要做的是根据 name 参数呈现一个 UserPage 组件。然后通过对创作的映射来渲染所有用户的艺术图像。所以在这种情况下，您将在 UserPage 组件内进行映射。

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

React-Router useParams bring user data at multiple times

reactjs

react-router

react-redux

react-hooks