Next.js动态键添加到不工作的状态

Question

我一直在尝试动态地添加一个键到状态中。我试过很多方法，比如

1。

const store = (set, get) => ({
keyAttrib: {key1: "value1", key2: 2},
update: (key, value) => {
let newState = { ...get().keyAttrib, [key]: value };
set(newState);
}
})

2. const store = (set) => ({
   keyAttrib: { key1: "value1", key2: 2 },
   update: (key, value) => {
   set((state) => ({ keyAttrib: { ...state.keyAttrib, [key]: value } }));
   },
   });
   

但是它们似乎都不工作。

Answer 1

您提供的第二个示例对我来说非常好:

const useStore = create((set) => ({
keyAttrib: {key1: "value1", key2: 2},
update: (key, value) =>
set((state) => ({
keyAttrib: {
...state.keyAttrib,
[key]: value,
},
})),
}));

这是工作codesandbox(请忽略任何样式),你可以添加/更新键-值对,下拉key3总是更新。如果这仍然没有帮助，请在codesandbox提供一个最小的工作示例。

event.preventDefault ()需要来防止表单执行页面刷新，这会将您的Zustand Store重置为其初始值。