如何将类组件中依赖prevState的commonSetState转换为函数组件？

在函数组件中，我们可以通过useState的函数式更新来替代类组件里依赖prevState的setState写法，这能确保基于最新的状态值计算新状态，逻辑和类组件完全一致。

完整改写示例（保留合并状态） #

import React, { useState } from 'react';

function TestContainer(props) {
  // 初始化状态，对应类组件constructor里的state定义
  const [state, setState] = useState({
    attached: initializeObject(props.TestTransactions),
    numTrue: props.TestTransactions.length,
  });

  // 改写commonSetState方法
  const commonSetState = () => {
    setState(prevState => ({
      attached: {
        ...prevState.attached,
        ...initializeObject(props.newTransactions),
      },
      numTrue: prevState.numTrue + props.newTransactions.length,
    }));
  };

  // 组件其余逻辑和渲染内容...
  return <div></div>;
}

推荐优化：拆分独立状态 #

函数组件更推荐将关联度低的状态拆分为独立的useState，状态管理更清晰，也避免不必要的状态合并：

import React, { useState } from 'react';

function TestContainer(props) {
  // 拆分attached和numTrue为独立状态
  const [attached, setAttached] = useState(initializeObject(props.TestTransactions));
  const [numTrue, setNumTrue] = useState(props.TestTransactions.length);

  const commonSetState = () => {
    // 更新attached时依赖旧值，用函数式更新
    setAttached(prevAttached => ({
      ...prevAttached,
      ...initializeObject(props.newTransactions),
    }));
    // 更新numTrue时同样用函数式更新依赖旧值
    setNumTrue(prevNum => prevNum + props.newTransactions.length);
  };

  // 组件其余逻辑和渲染内容...
  return <div></div>;
}

关键说明 #

• 函数式更新的核心是：当新状态依赖旧状态的值时，调用状态更新函数（setState/setAttached等）时传入一个函数，参数就是最新的旧状态值，返回新的状态对象或值。
• 如果commonSetState需要作为回调传递给子组件，建议用useCallback包裹，并添加对应的依赖项（比如props.newTransactions、initializeObject），避免组件重复渲染。

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