React组件从数据库取数计算平均值无结果，求技术支持

你的代码存在几个关键问题，导致平均值无法计算并显示：

• 计算函数未触发：getAverage函数定义后从未被调用，数据获取完成后没有执行计算逻辑
• 状态更新方式错误：在map中循环调用setEvaluationsArray会导致多次不必要的状态更新，且因为React状态更新的异步性，无法正确累积数组
• 闭包与异步状态问题：连续调用setSum和setAverage时，依赖的是旧的状态值，无法获取最新更新后的数组和总和
• 初始状态不合理：allEvaluations初始值为undefined，直接调用map会报错
• Effect依赖缺失：useEffect的依赖数组为空，当props.mealId变化时不会重新请求数据

修复后的代码 #

import React, { useState, useEffect } from 'react';

const AverageEvaluation = (props) => {
  // 初始化allEvaluations为空数组，避免map报错
  const [allEvaluations, setAllEvaluations] = useState([]);
  // 只需要保存平均值状态，无需额外保存数组和总和
  const [average, setAverage] = useState(0);

  useEffect(() => {
    // 每次mealId变化时重新请求数据
    fetch(`http://127.0.0.1:8000/api/getevaluations/${props.mealId}`, {
      method: 'GET',
      headers: { 'Content-Type': 'application/json' }
    })
    .then(response => response.json())
    .then(response => {
      setAllEvaluations(response);
      // 数据获取后直接计算平均值
      calculateAverage(response);
    })
    .catch(err => console.error('请求错误:', err));
  }, [props.mealId]); // 添加mealId作为依赖

  // 单独的计算函数，直接使用传入的数据源计算
  const calculateAverage = (data) => {
    if (!data || data.length === 0) {
      setAverage(0);
      return;
    }
    // 计算总和
    const sum = data.reduce((acc, item) => acc + item.ivertinimai, 0);
    // 计算平均值，保留小数可以用toFixed
    const avg = sum / data.length;
    setAverage(avg);
  };

  return (
    <>
      {/* 可以处理空数据的显示，比如显示"暂无评分" */}
      {allEvaluations.length === 0 ? '暂无评分' : average.toFixed(1)}
    </>
  );
};

export default AverageEvaluation;

关键改动说明 #

• 移除冗余状态：不需要evaluationsArray和sum状态，直接从接口返回的数据计算平均值，减少状态管理复杂度
• 直接在请求完成后计算：数据获取成功后立即调用计算函数，确保逻辑触发
• 修正Effect依赖：添加props.mealId到依赖数组，保证ID变化时重新请求数据
• 空数据处理：避免数组长度为0时出现NaN，同时给用户友好提示
• 避免闭包问题：计算时直接使用接口返回的response，而非依赖组件状态，确保拿到最新数据

内容的提问来源于stack exchange，提问作者mykolasb