如何在 React 中实现组件循环

2020-07-16 08:00:00 · 飞浪

介绍 React允许您轻松地在组件内编写JavaScript代码。这使得任何开发人员都可以轻松地处理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 课程以继续学习：

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何在 React 中实现组件循环

杭州电子商务研究院

5年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

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;

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;

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); }) },[])

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} </> ); }