能否让Zustand的setState像React的setState一样使用？

API 探路者

2026-8-19

如何让Zustand的setState支持React风格的函数式属性更新

Zustand的setState本身提供了灵活的更新能力，但默认直接传对象时，属性值无法以函数形式依赖前状态。要实现类似React中setState的嵌套函数式更新，有两种可行方案：

方案1：使用原生函数式更新（推荐）

Zustand原生支持将函数作为setState的参数，通过该函数获取完整的前状态，再返回新状态结构。这种写法无需额外配置，是官方推荐的方式：

useStore().setState((prevState) => ({
  ...prevState,
  stateOne: {
    ...prevState.stateOne,
    newProperty: 'value'
  }
}));

方案2：自定义中间件扩展对象内函数式更新

如果更偏好React那种在更新对象内嵌套函数的写法，可以自定义一个中间件来增强setState的能力，实现属性级别的函数式解析：

const functionalUpdateMiddleware = (config) => (set, get, api) => {
  const enhancedSet = (update) => {
    if (typeof update === 'function') {
      set(update);
    } else {
      const resolvedUpdate = {};
      const prevState = get();
      for (const key in update) {
        resolvedUpdate[key] = typeof update[key] === 'function'
          ? update[key](prevState[key])
          : update[key];
      }
      set(resolvedUpdate);
    }
  };
  return config(enhancedSet, get, api);
};

// 创建Store时注入中间件
const useStore = create(
  functionalUpdateMiddleware((set) => ({
    stateOne: { oldProperty: 'oldValue' },
    // 其他状态定义
  }))
);

// 现在可按预期方式调用
useStore().setState({
  stateOne: (prevState) => ({ ...prevState, newProperty: 'value' })
});