React-RouteruseParams多次帶來用戶資料

我正在嘗試獲取特定用戶的影像，并且我正在使用 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

uj5u.com熱心網友回復：

這里的問題是您正在為每個創建呈現一個 UserPage 組件。我相信您想要做的是根據名稱引數呈現一個 UserPage 組件。然后通過對創作的映射來渲染所有用戶的藝術影像。因此，在這種情況下，您將在 UserPage 組件內進行映射。

標籤：

上一篇：將物件作為道具傳遞給組件

下一篇：我嘗試向我的用戶展示，但它不起作用