如何在react中对有数字的对象阵列进行求和

这是一个简短的教程，介绍如何在React组件中渲染一个对象阵列。我们有一个对象数组，其数据来自API或固定的。

比如说:

employeeList = [
    {
        name: 'John',
        email: 'john@gmail.com'
    },

    {
        name: 'Ram  ',
        email: 'ram@gmail.com'
    }
]

我们可以使用Array map函数来迭代数组中的每个对象。

让我们看看如何使用Array.map方法在R eact组件中进行迭代。

使用map方法渲染数组对象的React类组件

• 创建一个react组件app.jsx
• 我们有存储在反应状态对象中的对象数组
• 在render 方法中，使用map 方法迭代对象数组，并构建结果对象。
• 在render方法中使用javascript表达式语法添加这个结果

import "./styles.css";

import React, { Component } from 'react';
import { render } from 'react-dom';

export default class App extends Component {
    constructor(props) {
    super(props);
    this.state = {
      data: [{
        name: 'John',
        email: 'john@gmail.com'
    },{
        name: 'Ram  ',
        email: 'ram@gmail.com'
    }]
    }
    }
  render() {
    const emps = this.state.data;
const result=emps.map((emp,index) => {emp.name});

         
    return {result};
  }
}

这将打印出对象值的有序列表

显示对象数组的无状态React功能组件

这是一个无状态的功能组件。

• 在Return功能组件中，我们使用map来迭代和构建li对象，使用javascript表达式来打印。

import "./styles.css";

export default function App() {
  const employeeList = [
    {
      name: "John",
      email: "john@gmail.com"
    },

    {
      name: "Ram  ",
      email: "ram@gmail.com"
    }
  ];
  return (
    
      {this.employeeList.map((emp, index) => (
        {emp.name}
      ))}
      ;
    
  );
}

总结

在本教程中，你学到了如何在有状态和无状态组件中呈现对象数组。