在 React JS 中循环数组 | React Foreach 循环示例

17 Mar 2025 | 阅读 2 分钟

在本节中，我们将使用一个数组来解释在 render 中使用原生循环。为此，我们在 render 中描述了一个 react 循环数组示例。当我们想构建任何 Web 应用程序时，拥有处理数据数组的知识非常重要。在此示例中，我们将看到在 react js 中使用循环。在我们的示例中，我们将使用 react js 中的 for 循环。为了执行此操作，我们必须遵循一些步骤。

在本节中，我们将使用 react 应用程序。当我们需要 map、foreach 循环和 for 循环时，我们可以参考以下示例来学习在 react js 中使用循环数组。在数组中，我们总是需要 for 循环和 foreach 循环。当我们想在 react 中循环我们的数组时，它需要一个 map 来实现。因此，我们将解释 react 原生中 map 的示例。 map() 方法创建一个新数组。在调用数组中，它提供了对每个元素调用函数的调用结果。这可以简化循环过程。当我们使用 map 时，我们不需要使用 forEach 函数和 for 循环。 Map、forEach 循环、for 循环有很多不同之处。 map 函数使用数据并创建一个新数组，而不是覆盖现有数据。由于 map 函数的所有特性和简单性，React 文档强烈建议我们使用 map 函数。

我们将在 react 应用程序中提供两个示例来解释这个简单的概念。在第一个示例中，我们将描述 react 循环，它有一个一维数组。在第二个示例中，我们将描述一个具有多维数组的循环。两个示例如下

示例 1

rc/App.js

import React from 'react';
   
function App() {
   
  const myArray = ['Jack', 'Mary', 'John', 'Krish', 'Navin'];
  
  return (
    <div className="container">	
        <h1> Example of React Map Loop </h1>
   
        {myArray.map(name => (
          <li>
            {name}
          </li>
        ))}
   
    </div>
  );
}
   
export default App;

示例 2

src/App.js

import React from 'react';
  
function App() {
  
 const students = [
              {
                'id': 1, 
                'name': Jack, 
                'email': 'jack@gmail.com'
              },
              {
                'id': 2, 
                'name': 'Mary', 
                'email': ?mary@gmail.com'
              },
              {
                'id': 3, 
                'name': 'John', 
                'email': 'john@gmail.com'
              },
          ];
  
  return (
    <div className="container">
        <h1> Example of React Map Loop </h1>
   
        <table className="table table-bordered">
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
  
            {students.map((student, index) => (
              <tr data-index={index}>
                <td>{student.id}</td>
                <td>{student.name}</td>
                <td>{student.email}</td>
              </tr>
            ))}
  
        </table>
  
    </div>
  );
}
  
export default App;

运行此示例后，我们将获得以下预览