React类组件转函数组件：useState替代setState复用状态更新方案

场景回顾 #

之前在类组件中，表单所有输入复用同一个handleChange函数更新状态，完成后通过回调将数据写入MongoDB。转成函数组件后，拆分的useState状态难以复用类似的统一更新逻辑，不想用繁琐的switch-case处理。

原类组件核心逻辑：

handleChange = (e, t, l) => {
    if (l) {
        var lang = this.state[l]
        lang[t] = e.target.value
        this.setState({[l] : lang}, () => { this.setData() })
    } else {
        this.setState({[t]:e.target.value}, () => { this.setData() })
    }
}

函数组件当前状态定义：

const [id, setId] = useState(props.count)
const [collapsed, setCollapsed] = useState(false)
const [type, setType] = useState('')
const [answer, setAnswer] = useState(null)
const [english, setEnglish] = useState({ title: '', options: [] })
const [spanish, setSpanish] = useState({ title: '', options: [] })

方案1：合并为单个状态对象 #

将分散的状态合并为一个对象，和类组件的state结构保持一致，复用类组件的更新思路，同时遵循React状态不可变原则：

const [formState, setFormState] = useState({
  id: props.count,
  collapsed: false,
  type: '',
  answer: null,
  english: { title: '', options: [] },
  spanish: { title: '', options: [] }
});

const handleChange = (e, t, l) => {
  setFormState(prevState => {
    const newState = { ...prevState };
    if (l) {
      // 浅拷贝嵌套对象，避免直接修改原状态
      newState[l] = { ...newState[l], [t]: e.target.value };
    } else {
      newState[t] = e.target.value;
    }
    return newState;
  });
};

// 替代类组件setState回调，监听状态变化调用setData
useEffect(() => {
  setData();
}, [formState]);

调用方式和原类组件完全一致：

onChange={(e) => handleChange(e, 'type')}
onChange={(e) => handleChange(e, 'title', 'english')}
onChange={(e) => handleChange(e, 'title', 'spanish')}

方案2：用映射表关联状态与更新函数 #

如果想保留拆分的useState，可以创建一个映射表，将状态key和对应的setter函数绑定，避免switch-case的冗余代码：

// 保留原拆分的状态定义
const [id, setId] = useState(props.count)
const [collapsed, setCollapsed] = useState(false)
const [type, setType] = useState('')
const [answer, setAnswer] = useState(null)
const [english, setEnglish] = useState({ title: '', options: [] })
const [spanish, setSpanish] = useState({ title: '', options: [] })

// 构建状态更新函数映射表
const stateSetters = {
  id: setId,
  collapsed: setCollapsed,
  type: setType,
  answer: setAnswer,
  english: setEnglish,
  spanish: setSpanish
};

const handleChange = (e, t, l) => {
  if (l) {
    // 处理嵌套语言对象的更新
    const setter = stateSetters[l];
    setter(prev => ({ ...prev, [t]: e.target.value }));
  } else {
    // 处理普通状态的更新
    const setter = stateSetters[t];
    setter(e.target.value);
  }
};

// 监听所有相关状态变化，调用setData
useEffect(() => {
  setData();
}, [id, collapsed, type, answer, english, spanish]);

额外建议 #

• 无论哪种方案，都要遵守状态不可变原则：更新嵌套对象时必须拷贝原对象，不能直接修改（原类组件的直接赋值写法不符合规范，函数组件中要修正）。
• 如果表单逻辑复杂、状态嵌套层级深，可以考虑使用useReducer来管理状态，它在处理多类型状态更新时比useState更灵活。

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