React中如何给setItems附加操作？能否重写原setItems函数？

首先明确：你直接尝试重新赋值const声明的setItems是行不通的——const变量无法被重新赋值，而且强行覆盖会丢失React原生setter的引用，导致状态更新失效。不过可以通过封装原生setter的方式，实现调用自定义函数时既执行额外逻辑，又更新状态的需求，以下是两种实用方案：

方案1：用useCallback封装自定义setter #

直接在组件内创建一个包裹原生setter的新函数，用useCallback保证函数引用稳定，避免不必要的组件重渲染：

import { useState, useCallback } from 'react';

function MyComponent() {
  // 把原生setter改个名字，避免和自定义函数冲突
  const [items, originalSetItems] = useState([]);

  // 自定义带额外逻辑的setItems
  const setItems = useCallback((newItems) => {
    // 先执行你需要的额外操作，比如日志、数据校验、同步其他状态等
    console.log('准备更新items，新值:', newItems);
    // 再调用原生setter更新状态
    originalSetItems(newItems);
  }, [originalSetItems]);

  // 调用自定义的setItems即可
  const addItem = () => {
    setItems([...items, `新项${Date.now()}`]);
  };

  return (
    <div>
      <button onClick={addItem}>添加项</button>
      {items.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
    </div>
  );
}

方案2：封装成自定义Hook复用逻辑 #

如果多个组件都需要这种带额外逻辑的状态更新，可以把逻辑封装成自定义Hook，方便复用：

import { useState, useCallback } from 'react';

// 自定义Hook，统一处理状态更新的额外逻辑
function useCustomState(initialValue) {
  const [state, setState] = useState(initialValue);

  const customSetState = useCallback((newValue) => {
    // 这里写通用的额外操作，比如埋点、数据格式化
    console.log('状态更新:', newValue);
    setState(newValue);
  }, [setState]);

  return [state, customSetState];
}

// 在组件中使用自定义Hook
function MyComponent() {
  const [items, setItems] = useCustomState([]);

  const addItem = () => {
    setItems([...items, `新项${Date.now()}`]);
  };

  return (
    <div>
      <button onClick={addItem}>添加项</button>
      {items.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
    </div>
  );
}

为什么不建议直接重写原生setItems？ #

1. const声明的变量无法被重新赋值，强行赋值会触发语法错误；
2. 即便改用let声明，直接覆盖原生setter会破坏React内部的状态更新机制，可能导致组件不渲染、状态不同步等异常问题。

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