React.Js - Typescript 如何將對象數組作為道具傳遞？

Question

每個人。

所以我正在用 React.Js 學習 TypeScript，我遇到了一個問題。

我有一個“頁面”，其中包含一組對象，這些對象包含有關每個用戶的更多信息

const USERS = [
        {name: 'Nicole', id: 1, placeCount: 10, places: 'place 1', image: 'image source'},
        {name: 'Sarah', id: 2, placeCount: 20, places: 'place 3', image: 'asdasd'}
    ];

現在，我有一個呈現所有用戶列表的用戶頁面，這個列表是一個由 UsersListItem 組件組成的組件，現在這個組件呈現來自 USERS 數組中每個對象的所有數據。 我知道如何從 USERS 數組中傳遞一個對象，但我想發送包含所有對象的整個數組

所以問題是如何將 USERS 數組傳遞給 UsersList ？

這是我的結構

這是我的 /users 頁面

import UsersList from '../components/UsersList';


function User() {
    const USERS = [
        {name: 'Nicole', id: 1, placeCount: 10, places: 'place 1', image: 'image source'},
        {name: 'Sarah', id: 2, placeCount: 20, places: 'place 3', image: 'asdasd'}
    ];


    return (
  
        <UsersList  
            user={USERS[0].name} 
            id={USERS[0].id} 
            image={USERS[0].image} 
            placeName={USERS[0].places} 
            placeCount={USERS[0].placeCount}/>
     
      )
}

export default User

這是我的用戶列表組件

import UsersListProps from './props/props_UserItem';
import UserIListtem from './UserIListtem';



const UsersList = ( props : UsersListProps) =>{

    const {user, id, image, placeCount, placeName} = props

    if(props === null){
        return(
            <div>
                <h1>No users found</h1>
            </div>
        );
    }

    return(
        <ul>
            {
                <UserIListtem 
                    user={user} 
                    id={id} 
                    image={image} 
                    placeName={placeName} 
                    placeCount={placeCount}/> 
            }
        </ul>
    );
  
}

這是我的 UsersListItem 組件

import UsersListProps from './props/props_UserItem';

const UserIListtem = (props: UsersListProps) => {
    const {user, id, image, placeCount, placeName} = props;
  return (
    <li>
    <div>

        <div>
            <img src={image} alt={placeName}/>
        </div>
        <div>{id}
            <h2>{user}</h2>
            <h3>{placeCount}</h3>
        </div>
    </div>

</li>
  )
}

export default UserIListtem

這是我放入名為 props_UserItem.tsx 的單獨文件中的 UsersListProps 道具

interface UsersListProps {
    user: string,
    id: number,
    image: string,
    placeCount: number,
    placeName: string

}

export default UsersListProps

Answer 1

您可以用 users: Array 替換 props，然后發送整個數組並在 UserIListtem 中從那里加載數據。

Answer 2

您可以簡單地在User組件中返回它：

return (
 <UsersList users={USERS} />
)

那么UsersList組件會變成：

const UsersList = ( { users } : UsersListProps) => {
 if(!users?.length){
   return(
     <div>
       <h1>No users found</h1>
     </div>
   );
 }
 return(
  <ul>
   {users.map(({ id, name, image, places, placeCount }) => (
     <UserIListtem
      key={id} 
      name={name} 
      id={id} 
      image={image} 
      places={places} 
      placeCount={placeCount}/> 
   ))}
  </ul>
 );
}

和UserIListtem組件：

const UserIListtem = ({ name: user, id, image, placeCount, places: placeName }: User) => {
 return (
  <li>
   <div>
    <div>
     <img src={image} alt={placeName}/>
    </div>
    <div>{id}
     <h2>{user}</h2>
     <h3>{placeCount}</h3>
     </div>
   </div>
  </li>
 )
}

請記住還要將UsersListProps接口更改為：

export interface UsersListProps {
 users: User[];
}

export interface User {
 id: number;
 name: string;
 image: string;
 placeCount: number;
 places: string;
}