React Maximum update depth exceeded无限循环报错修复

问题现象 #

业务场景为React应用中实现CSV内容展示：点击按钮调用API获取响应，将响应渲染为表格，提交时保存对应数据。接口请求、数据保存功能正常，但存在两类异常：

• 点击侧边菜单拉取选中数据时，state无法正常更新，需要连续点击3次以上才能展示选中值对应的数据
• 添加带依赖项的useEffect执行CSV格式化逻辑后，持续触发内存报错，报错信息如下：

Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render

涉及状态变量说明 #

• viewcsv：通过useState声明，存储接口返回的原始CSV字符串
• csvHead：通过useState声明，存储CSV解析后的表头数组
• formatData：通过useState声明，存储CSV解析后的二维数组格式行数据
• csvformFields：通过useState声明，存储转换为键值对对象格式、可直接绑定表单的表格行数据

问题根因 #

原代码存在三个直接触发异常的问题：

• 依赖项配置逻辑完全倒置：useEffect监听csvformFields变化，但formatCsv内部本身就会执行setcsvformFields修改这个值，形成「值变更→执行格式化函数→修改值→值再次变更→重复执行函数」的死循环，最终触发更新深度超限报错。
• 状态更新存在闭包旧值问题：React中调用setState不会立刻同步更新state值，原逻辑在调用setcsvHead、setformatData之后，立刻读取csvHead、formatData做后续转换，拿到的是上一轮渲染的旧值，导致第一次执行格式化时生成的表单数据为空，要等多次重渲染凑齐最新state值才能渲染出正确内容，也就是需要多次点击侧边栏才出数据的核心原因。
• CSV解析逻辑存在缺陷：原逻辑按"分割后过滤逗号，会把带引号包裹的、内部含逗号的列错误截断，示例中3列的CSV解析完成后只剩2列就是这个问题导致的。

修复方案 #

依赖项选择 #

useEffect仅需要将viewcsv作为唯一依赖项，原因如下：

• 不能将csvformFields/csvHead/formatData作为依赖：格式化函数内部会更新这三个状态，只要把它们加入依赖数组，每次状态更新就会重新触发effect，再次更新状态，必然触发无限循环。
• 选择viewcsv作为依赖的核心逻辑：csvHead/formatData/csvformFields本质都是viewcsv的派生值，唯一的格式化触发源就是接口返回新的CSV字符串、更新viewcsv的时候，此时只需要执行一次格式化，把所有派生值计算完成后一次性更新state即可，既不会出现多次点击才加载数据的问题（所有计算都基于最新拿到的viewcsv同步完成，不存在读取旧state的情况），也不会触发无限循环（只有接口返回新数据时才会触发effect，内部更新的派生状态不在依赖列表中，不会重复触发执行）。

修复后完整代码 #

const Parameters = ({ selectedtestcaseId, hideTestTab }) => {

  const [csvattachment, setcsvattachment] = useState({})
  const [slectedattachementId, setslectedattachementId] = useState()
  const [viewcsv, setviewcsv] = useState()
 
  const [csvHead, setcsvHead] = useState([])
  const [csvformFields, setcsvformFields] = useState([{}])
  const [formatData, setformatData] = useState([])

  useEffect(() => {
    // 无原始CSV数据时直接返回，不执行后续逻辑
    if (!viewcsv) return

    // 所有格式化计算基于当前最新的viewcsv同步完成，不依赖已有state的旧值
    const splitValues = viewcsv.split('\r\n').filter(row => row.trim() !== '')
    // 计算表头
    const currentHead = splitValues[0].split(',')
    // 计算二维数组行数据，兼容带引号包裹的含逗号字段
    const currentFormatData = []
    for (let i = 1; i < splitValues.length; i++) {
      const row = splitValues[i].match(/(".*?"|[^",\s]+)(?=\s*,|\s*$)/g) || []
      const cleanRow = row.map(item => item.replaceAll('"', '').trim())
      currentFormatData.push(cleanRow)
    }
    // 计算表单绑定用的键值对数据，直接使用上面同步计算出的表头和行数据
    const currentFormFields = currentFormatData.map(row => {
      return row.reduce((result, field, index) => {
        result[currentHead[index]] = field;
        return result;
      }, {})
    })

    // 所有值计算完成后一次性更新state，减少不必要的重渲染
    setcsvHead(currentHead)
    setformatData(currentFormatData)
    setcsvformFields(currentFormFields)
  }, [viewcsv]) // 仅依赖原始CSV数据源viewcsv

  // 表格渲染部分补充列表key，避免React渲染警告
  return (
    <table className="table table-striped table-bordered parameter-display">
      <thead>
        <tr>
          {csvHead.map((val, i) => <td key={`head-${i}`}>{val}</td>)}
        </tr>
      </thead>
      <tbody>
        {csvformFields?.map((d, rowIndex) => (
          <tr key={`row-${rowIndex}`}>
            {Object.keys(d).map(prop => (
              <td key={`cell-${rowIndex}-${prop}`}>
                <input 
                  type="text" 
                  name={prop} 
                  value={d[prop]} 
                  onChange={(e) => handleFormChange(rowIndex, e)} 
                />
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  )
}

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