React中useState异步数组求和的未定义错误及求和失效问题咨询

核心问题分析 #

1. 初始状态未定义：所有useState未设置初始空数组，初始值为undefined，读取length或数组索引时直接触发报错。
2. 逻辑运算符错误：第一个if判断里的&是位运算符，应改为&&逻辑与运算符。
3. 异步请求不同步：三个接口请求是独立异步的，可能部分数组先更新、部分未就绪，导致求和时出现索引越界或数据不全的问题。

修正步骤及代码 #

1. 初始化状态为空数组

把所有存储数组的useState初始值设为[]，从根源避免初始undefined引发的读取错误：

const [lnames, setlNames] = React.useState([]);
const [lnums, setlNums] = React.useState([]);
const [dnums, setdNums] = React.useState([]);
const [bnums, setbNums] = React.useState([]);

2. 同步处理异步请求（推荐）

用Promise.all同时发起三个请求，等待所有请求完成后再统一更新状态，确保三个数组同时就绪：

React.useEffect(() => {
  Promise.all([
    axios.get("http://localhost:7001/lunch"),
    axios.get("http://localhost:7001/dinner"),
    axios.get("http://localhost:7001/breakfast")
  ]).then(([lunchRes, dinnerRes, breakfastRes]) => {
    // 处理午餐数据
    const lunchNames = lunchRes.data.map(c => c.table_id);
    const lunchNums = lunchRes.data.map(c => c.table_num_count);
    setlNames(lunchNames);
    setlNums(lunchNums);

    // 处理晚餐数据
    const dinnerNums = dinnerRes.data.map(c => c.table_num_count);
    setdNums(dinnerNums);

    // 处理早餐数据
    const breakfastNums = breakfastRes.data.map(c => c.table_num_count);
    setbNums(breakfastNums);
  }).catch(err => {
    // 捕获请求错误
    console.error("数据请求失败:", err);
  });
}, []);

3. 正确的求和判断逻辑

确保三个数组都有数据且长度一致，再执行求和操作，避免索引越界：

let sumArray = [];

// 检查三个数组非空且长度匹配
if (lnums.length > 0 && bnums.length === lnums.length && dnums.length === lnums.length) {
  sumArray = lnums.map((num, index) => num + bnums[index] + dnums[index]);
}

完整修正后代码 #

const [lnames, setlNames] = React.useState([]);
const [lnums, setlNums] = React.useState([]);
const [dnums, setdNums] = React.useState([]);
const [bnums, setbNums] = React.useState([]);

React.useEffect(() => {
  Promise.all([
    axios.get("http://localhost:7001/lunch"),
    axios.get("http://localhost:7001/dinner"),
    axios.get("http://localhost:7001/breakfast")
  ]).then(([lunchRes, dinnerRes, breakfastRes]) => {
    const lunchNames = lunchRes.data.map(c => c.table_id);
    const lunchNums = lunchRes.data.map(c => c.table_num_count);
    setlNames(lunchNames);
    setlNums(lunchNums);

    const dinnerNums = dinnerRes.data.map(c => c.table_num_count);
    setdNums(dinnerNums);

    const breakfastNums = breakfastRes.data.map(c => c.table_num_count);
    setbNums(breakfastNums);
  }).catch(err => {
    console.error("数据加载失败:", err);
  });
}, []);

const customer_count_breakfast = bnums;
const customer_count_lunch = lnums;
const customer_count_dinner = dnums;

let sumArray = [];

if (lnums.length > 0 && bnums.length === lnums.length && dnums.length === lnums.length) {
  sumArray = lnums.map((num, index) => num + bnums[index] + dnums[index]);
}

关键说明 #

• 初始化为空数组后，即使请求未完成，读取length也只会得到0，判断条件会自动跳过求和逻辑，不会触发报错。
• Promise.all确保三个请求全部完成后再更新状态，避免部分数组就绪、部分未就绪的异步不一致问题。
• 增加数组长度一致性检查，防止因接口返回数据长度不同导致的索引越界错误。

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