反应其中包含列表的显示对象

Question

我在我的组件中传递了以下道具，然后应该显示它。

const userData = {'name':'Tom','hobbies':['Basketball','Judo']}
const userDataDisplay = props => {
return (
<>
   <h2>{props.name}</h2>
   <p>{props.hobbies.map(hobby=><li>{hobby}</li>)}</p>
</>
)
}

但是当我添加另一个用户时，用户名在前，然后是兴趣爱好，而我需要的是每个用户的兴趣爱好在名字之后。

 Tom
 Sam

Basketball
Judo
Carrom

出现而不是

 Tom
Basketball
Judo

 Sam
Carrom

我错过了什么明显的东西？

Answer 1

那是因为你需要先遍历你的数组，然后根据每个爱好同时显示 h2 标签和 p 标签

Answer 2

首先，要拥有多个用户，您将需要一个 Array, you only have one user object. If you have an array you can loop over all the users using map() 与您已经遍历您的爱好的方式相同。

其次，列表项 <li> 只有在列表 <ul> 或 <ol> 中才真正有意义。事实上你想要的是 nested list 所以你应该使用嵌套列表。

这是一个反映上述变化的工作解决方案。

const userData = [
  { name: "Tom", hobbies: ["Basketball", "Judo"] },
  { name: "Sam", hobbies: ["Carrom", "Football"] },
];

const UserDataDisplay = ({ userData }) => {
  return (
    <ul>
      {userData.map((user) => (
        <li>
          <ul>
            <h2>{user.name}</h2>
            {user.hobbies.map((hobby) => (
                <li>{hobby}</li>
            ))}
          </ul>
        </li>
      ))}
    </ul>
  );
};

ReactDOM.render(
  <UserDataDisplay userData={userData} />,
  document.getElementById("root")
);

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<div id="root"></div>

反应其中包含列表的显示对象

React diplay objects that have lists within them

jsx

reactjs