React中useState数组调用状态更新方法后未变更及触发无限渲染问题求助

咱们先拆解你遇到的两个核心问题，逐个击破：

1. 数组状态不更新的根源：直接修改原状态引用 #

React的状态是不可变的，你当前代码里const arr = arrayOfDocuments;只是把原状态数组的引用赋值给了arr，后续的arr[index] = obj或者arr.push(obj)都是直接修改原状态数组，并没有创建新的数组引用。React依赖状态引用的变化来检测更新，所以即使调用了setArrayOfDocuments(arr)，因为引用没变，组件不会重新渲染，状态看起来也没变化。

正确的状态更新方式 #

你需要创建新的数组来更新状态，推荐使用函数式更新（依赖prevState），这样可以避免闭包导致的旧状态问题：

const pushToArrayOfDocuments = (obj) => {
  // 用函数式更新获取最新的状态
  setArrayOfDocuments(prev => {
    // 复制原数组，创建新引用
    const newArr = [...prev];
    if (obj.filename && obj.file && obj.expiredate && obj.doctype) {
      // 直接查找目标索引，比先map再indexOf更高效
      const index = newArr.findIndex(e => e.filename === obj.filename);
      if (index !== -1) {
        newArr[index] = obj;
      } else {
        newArr.push(obj);
      }
    }
    return newArr;
  });
};

2. 无限渲染的原因：未缓存传递给子组件的函数 #

你提到使用setArrayOfDocuments([...arr])时触发了Maximum update depth exceeded错误，这是因为pushToArrayOfDocuments函数在父组件每次渲染时都会重新创建一个新的函数实例，作为setDocument props传给子组件。子组件会因为props变化重新渲染，如果子组件内部调用了setDocument，会触发父组件更新，父组件更新又生成新的函数，子组件再更新，形成无限循环。

解决方法：用useCallback缓存函数 #

使用React.useCallback包裹你的状态更新函数，并且指定正确的依赖数组（这里因为用了函数式更新，依赖数组是空的，因为我们没有直接依赖外部的arrayOfDocuments）：

import { useCallback, useState } from 'react';

// ...

const [arrayOfDocuments, setArrayOfDocuments] = useState([]);

const pushToArrayOfDocuments = useCallback((obj) => {
  setArrayOfDocuments(prev => {
    const newArr = [...prev];
    if (obj.filename && obj.file && obj.expiredate && obj.doctype) {
      const index = newArr.findIndex(e => e.filename === obj.filename);
      if (index !== -1) {
        newArr[index] = obj;
      } else {
        newArr.push(obj);
      }
    }
    return newArr;
  });
}, []); // 依赖数组为空，函数式更新不依赖外部状态

另外，建议给子组件加上React.memo，避免不必要的重新渲染：

import { memo } from 'react';

// 用memo包裹子组件，仅在props变化时重新渲染
const OperatorDocument = memo(({ title, description, setDocument, document, filedocname }) => {
  // 子组件逻辑
});

// 父组件中使用
<OperatorDocument 
  key={`Durc${count}`} 
  title="Durc" 
  description="Descrizione Durc" 
  setDocument={pushToArrayOfDocuments} 
  document={getObjectByName('Durc')} 
  filedocname="Durc" 
/>

这样既保证了状态更新的正确性，又彻底解决了无限渲染的问题。

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