Reactjs 如何在重复卡片中显示姓名

我使用axios从api获取了数据，我希望每个数据都使用react和bootstrap放在单独的卡中。这是我尝试过的代码

`

constdisplayprojects=（）=>{
常量url=http://jsonplaceholder.typicode.com/posts';
const[projects，setProjects]=useState（[]）；
useffect（（）=>{
get（url）.then（（response）=>setProjects（response.data））；
}, []);
const projectDisplay=projects.map（（项目）=>(
{project.title}
));
返回(
项目
{projectDisplay}
);
};
导出默认项目；

---

`

为了重复多张卡，您只需要在您的卡分区上使用映射功能。在您所做的工作中，您将在一个card div中获得多个Links元素：

看看我的沙盒：

import React，{useState，useffect}来自“React”；
从“axios”导入axios；
导出默认函数App（）{
const[projects，setProjects]=useState（[]）；
useffect（（）=>{
axios
.get（“https://reqres.in/api/users?page=2")
。然后（（响应）=>{
//解构我的数据
const{data}=response.data
console.log（数据）
setProjects（数据）
});
}, []);
返回(
项目
{/*使用map遍历数据并获取多个div*/}
{
projects&&projects.map（project=>{
返回(
{project.email}
)
})
}
);
}

如果代码不清楚，并且您不理解某些部分，请随时询问。 如果是回答你的问题，你会接受吗？这是我第一次回答：）

---

NB:Json占位符api被破坏了这就是为什么我使用另一个假的api生成器的原因

另一个是，请您解释一下projects&&projects.map。它是做什么的？@mayaj:“projects&&projects”是and运算符，它的工作方式是：@mayaj:“projects&&projects”是and运算符，它的工作方式是：（如果这部分是真的）和（这部分将执行）。为什么这很重要，假设在api数据中，我们有一个用户没有任何电子邮件，例如，您将得到一个错误，因为您将尝试映射到未定义的。它将是[undefined.map]，这将是一个错误。您还可以通过条件呈现来更改and（&&）运算符。以下是一个链接，以进一步了解该概念：

const DisplayProjects = () => {
 const url = 'http://jsonplaceholder.typicode.com/posts';
 const [projects, setProjects] = useState([]);
useEffect(() => {
axios.get(url).then((response) => setProjects(response.data));
}, []);

const projectDisplay = projects.map((project) => (
<h1 key={project.id}>{project.title}</h1>
));

return (
<div>
  <Layout>
    <h3>Projects </h3>

   
    <div className="container">
  
      
      <div className="card">
        <div className="contact-card">
          <Link>{projectDisplay}</Link>
        </div>
      </div>

      
    </div>
  </Layout>
</div>
  );
 };

export default DisplayProjects;