在React中从JSON获取平均值

import React, { Component } from 'react';

class AverageValue extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [], // 存储JSON数据
      average: 0 // 存储平均值
    };
  }

  componentDidMount() {
    // 使用fetch API从服务器获取JSON数据
    fetch('data.json')
      .then(response => response.json())
      .then(data => this.setState({ data }))
      .catch(error => console.log(error));
  }

  calculateAverage = () => {
    const { data } = this.state;
    const values = data.map(item => item.value); // 提取数值字段
    const sum = values.reduce((acc, curr) => acc + curr, 0); // 求和
    const average = sum / values.length; // 计算平均值
    this.setState({ average });
  }

  render() {
    const { average } = this.state;

    return (
      <div>
        <button onClick={this.calculateAverage}>计算平均值</button>
        <p>平均值: {average}</p>
      </div>
    );
  }
}

export default AverageValue;

[
  { "id": 1, "value": 10 },
  { "id": 2, "value": 20 },
  { "id": 3, "value": 30 }
]