React函数式组件传递方法及组件数组状态丢失问题解决方案咨询

问题分析 #

你遇到的核心问题是组件卸载导致内部状态丢失：当切换索引时，当前显示的<Order>组件会从DOM中移除，React会卸载该组件，它的内部状态也就随之销毁了。当你切回原索引时，React会重新创建一个全新的<Order>实例，所以状态会回到初始值，而非之前修改后的状态。

解决方案 #

下面提供两种不同场景下的可行方案，你可以根据自己的需求选择：

方案1：保持所有组件挂载（简单直接）

不需要修改子组件，只让所有<Order>组件始终挂载在DOM中，通过CSS控制显示/隐藏。这样每个组件的状态都会被完整保留，因为它们从未被卸载。

修改后的父组件代码：

export const Test = () => { 
  const [index, setIndex] = useState(0); 
  const totalComponents = 3;

  return ( 
    <div> 
      <button onClick={() => setIndex((old) => (old + 1) % totalComponents)}> 
        change 
      </button> 
      {`page ` + index} 
      {/* 渲染所有组件，仅显示当前索引对应的项 */}
      {Array.from({ length: totalComponents }).map((_, idx) => (
        <div 
          key={idx} 
          style={{ display: idx === index ? 'block' : 'none' }}
        >
          <Order />
        </div>
      ))}
    </div> 
  ); 
};

这种方案适合组件逻辑简单、性能开销小的场景，实现起来最省心。

方案2：保存组件状态快照（适合性能敏感场景）

如果你的<Order>组件比较重，不想一直挂载所有实例，可以在组件卸载前保存状态，下次挂载时恢复。这种方法仅需轻微修改子组件，无需把所有状态都提升到父组件：

首先修改<Order>组件，添加状态保存与恢复逻辑：

const Order = ({ savedState, onSaveState }) => { 
  // 用传入的保存状态初始化，无保存状态则用默认值1
  const [someState, setSomeState] = useState(savedState || 1); 

  // 组件卸载前，将当前状态传递给父组件保存
  useEffect(() => {
    return () => {
      onSaveState(someState);
    };
  }, [someState, onSaveState]);

  return ( 
    <div> 
      <button onClick={() => setSomeState((old) => old + 1)}> 
        {someState} 
      </button> 
    </div> 
  ); 
};

然后修改父组件，用useRef存储每个组件的状态快照：

export const Test = () => { 
  const [index, setIndex] = useState(0); 
  const totalComponents = 3;
  // 用useRef保存每个组件的状态，初始值均为1
  const componentStates = useRef(new Array(totalComponents).fill(1));

  // 保存指定索引组件的状态
  const handleSaveState = (idx, state) => {
    componentStates.current[idx] = state;
  };

  return ( 
    <div> 
      <button onClick={() => setIndex((old) => (old + 1) % totalComponents)}> 
        change 
      </button> 
      {`page ` + index} 
      {/* 仅渲染当前索引的组件，传入保存的状态 */}
      <Order 
        key={index}
        savedState={componentStates.current[index]}
        onSaveState={(state) => handleSaveState(index, state)}
      />
    </div> 
  ); 
};

这种方案的优势是只有当前组件会被挂载，节省性能的同时，依然保留了每个组件的独立状态。

内容的提问来源于stack exchange，提问作者Marwan-Ezzat