React中从map函数取值时避免useState重复渲染的问题

你遇到的核心问题是在组件渲染阶段直接调用setPrice：每次组件渲染时都会执行这段map遍历逻辑，每遍历到一个proc就调用setPrice更新状态，状态更新会触发组件重新渲染，重渲染又会再次执行遍历和setPrice，形成无限循环，最终导致多次重渲染报错。

正确的处理方式 #

把价格收集和状态更新的逻辑放到useEffect中，并且先一次性收集所有需要的价格，再统一更新状态，避免频繁触发状态更新：

1. 首先修正状态命名（更符合React的命名习惯，非强制但更清晰）：

const [prices, setPrices] = useState([]);

2. 使用useEffect监听recordProcedures的变化，仅当数据更新时才执行收集和状态更新：

import { useState, useEffect } from 'react';

// ...其他组件代码

useEffect(() => {
  // 一次性收集所有选中的proc的price
  const collectedPrices = recordProcedures.reduce((result, item) => {
    // 跳过没有chosen的项
    if (!item.chosen) return result;
    // 把当前item的chosen里的price都加入结果数组
    return [...result, ...item.chosen.map(proc => proc.price)];
  }, []);

  // 统一更新状态，只触发一次重渲染
  setPrices(collectedPrices);
}, [recordProcedures]); // 依赖项：仅当recordProcedures变化时执行这段逻辑

额外注意点 #

• 不要在组件的渲染阶段（组件函数体直接执行的代码）调用setState，这会干扰React的渲染流程，大概率引发无限循环。
• 原代码中使用map但没有利用其返回的数组，属于误用场景：如果只是遍历数据做操作，用forEach或reduce更合适；map的核心用途是生成新数组（比如渲染列表JSX）。

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