如何在 React 中实现组件循环
介绍
React 允许您轻松地在组件内编写 JavaScript 代码。这使得任何开发人员都可以轻松地处理 React 中的常见编程技术，例如循环遍历一组项目、创建和调用函数、将数据存储在局部变量中等等。
本指南演示了如何在常见用例中实现循环，例如呈现静态数据列表和从 API 输出数据。
在 JSX 中输出数组
组件循环是常规 JavaScript 循环与一些 JSX 的组合。JSX 的一大特色是它允许你直接在 DOM 上输出数组。这意味着如果你有一个名为data 的数组，你可以在 DOM 上输出它的元素，如下所示：
return(
<>
{data}
</>
)
因此，您可以将数据及其支持的 HTML 推送到数组中，然后在组件的返回语句中用花括号括起来输出该数组。您可以使用几个 JavaScript 循环来实现此目的。由于map()是最流行且最简单的，因此本指南在示例中广泛使用它。
渲染静态数据
考虑一个简单的用例，您必须在 DOM 上呈现项目列表。
import React from 'react';
import './App.css';
function App() {
return (
<>
<h2>This is a simple list of items</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</>
);
}
export default App;
当然，渲染每个<li>会很麻烦且耗时，如上所示。最佳做法是分解代码的重复段并将其放入数组中。例如，每个<li>标签都可以看作一个重复段，因此您可以创建一个包含以下数据的数组：
let items=['Item 1','Item 2','Item 3','Item 4','Item 5'];
最后，输出该数组为：
<ul>
{items.map((item,index)=>{
return <li key={index}>{item}</li>
})}
</ul>
此外，您可以通过将整个 HTML 推送到数组中来清理 JSX：
let itemList=items.map((item,index)=>{
return <li key={index}>{item}</li>
})
然后渲染该单个数组。
function App() {
return (
<>
<h2>This is a simple list of items</h2>
<ul>
{itemList}
</ul>
</>
);
}
或者，可以使用forEach()方法执行相同的操作，如下所示。
import React from 'react';
import './App.css';
let items=['Item 1','Item 2','Item 3','Item 4','Item 5'];
let itemList=[];
items.forEach((item,index)=>{
itemList.push( <li key={index}>{item}</li>)
})
function App() {
return (
<>
<h2>This is a simple list of items</h2>
<ul>
{itemList}
</ul>
</>
);
}
export default App;
您可以使用常规 for 循环尝试上述方法，其效果相同。随着组件规模的扩大，将代码与 UI 分开可以使组件更简洁、模块化、可读性更强，因此也更易于调试。
渲染动态数据
在另一个实际场景中，您通常会从后端获取数据，并将其存储在组件的状态中，然后循环遍历该数据以在页面上输出该数据。假设您想为您的 Web 应用获取用户列表。
导入useState并创建一个简单的状态变量来保存对象数组。
import React,{useState} from 'react';
import './App.css';
function App() {
const [userData,setUserData]=useState([])
</>
);
}
export default App;
要进行 API 调用，请在根目录中运行以下命令来安装axios ：
npm install axios
由于页面需要在前端请求时立即完全加载数据，因此必须在组件首次挂载到 DOM 上时填充数据。这可以通过使用生命周期钩子useEffect()通过将空数组作为第二个参数传递来完成。
useEffect(()=>{
//make an API call when component first mounts
},[])
接下来，使用来自服务器的数据填充状态。
useEffect(()=>{
axios.get('https://reqres.in/api/users?page=2')
.then(res=>{
console.log(res.data.data);
setUserData(res.data.data)
})
.catch(err=>{
console.log(err);
})
},[])
使用map()循环遍历数据并将其显示在页面上。
return (
<>
{userData.map((data,id)=>{
return <div key={id}>
<h2>{data.first_name} {data.last_name}</h2>
<p>{data.email}</p>
</div>
})}
</>
);
}
最后，将逻辑从模板中分离出来。
const users=userData.map((data,id)=>{
return <div key={id}>
<h2>{data.first_name} {data.last_name}</h2>
<p>{data.email}</p>
</div>
})
return (
<>
{users}
</>
);
}
结论
使用组件循环输出和操作数据是 React 中的一种常见开发方法。它允许您将具有动态数据的 HTML 元素组合在一起，如本指南所示。在没有 DOM 查询的纯 JavaScript 应用中，这通常是不可能做到的。您应该使用组件循环以干净、高效且易读的方式输出项目集。
了解更多
探索 Pluralsight 的这些 React 课程以继续学习：
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~