如何使用Immer更新Zustand状态，并以React Hook- form控制的形式添加对象？
如何使用Immer更新Zustand状态，并以React Hook- form控制的形式添加对象？
提问于 2022-10-20 13:55:01
我正在与祖斯坦和伊默尔的反应-钩-形式的斗争。我希望将表单中的一组值注册到列表中，然后能够向该列表中添加新的对象。
场景:用户在表单中输入单个包数据，然后单击按钮将其保存到内存中(状态，由Zustand Immer管理)。对象然后添加到订单列表(数组)中，然后可以在将其发送到后端之前向该列表添加更多的包。
我需要帮助的部分，添加额外的包裹到列表(名为addParcel这里)。这个想法是'setParcel‘创建第一个对象，然后'addParcel’向列表中添加额外的包。列表是用对象映射函数呈现的。
错误消息说“草案不是一个函数”。
这是处理逻辑的userStore，它被导入到主组件。
import create from "zustand";
import { produce } from "immer";
import { SingleParcel } from "../type/User";
type ParcelQuoteState = {
parcel: SingleParcel;
setParcel: (input: SingleParcel) => void;
addParcel: (input: SingleParcel) => void;
removeParcel: () => void;
};
export const useParcelStore = create<ParcelQuoteState>((set) => ({
parcel: Object.create({}),
setParcel: (input: SingleParcel) => {
set((state) => ({
parcel: Object.assign(state.parcel, input),
}));
},
addParcel: (input: SingleParcel) => {
set(
produce((parcel) => {
draft.parcel.push({
id: Math.floor(Math.random() * 100),
data: input,
});
})
);
},
removeParcel: () => {
set((state) => ({
parcel: Object.assign(state.parcel, null),
}));
},
}));这就是SingleParcel类型，
export type SingleParcel = {
parcelID: string | undefined;
parcelWeight_kg: number | undefined;
parcelHeight_cm: number | undefined;
parcelWidth_cm: number | undefined;
parcelLength_cm: number | undefined;
parcelVolume_m3: number | undefined;
parcelAmount: number | undefined;
parcelAvailableTime: string | undefined;
parcelDeliveryTime: string | undefined;
parcelStartStreet: string;
parcelStartStreetNumber: number | undefined;
parcelStartAreaCode: number | undefined;
parcelStartCity: string | undefined;
parcelDestinationStreet: string | undefined;
parcelDestinationStreetNumber: number | undefined;
parcelDestinationAreaCode: number | undefined;
parcelDestinationCity: string | undefined;
};参考文献，
https://github.com/pmndrs/zustand
- React-Hook-Form：https://react-hook-form.com/get-started
：
- Zustand
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-10-21 07:37:03
最后，我设法解决了“addParcel”字节，直接将草案更改为Parcel。我不是将数据推送到第二状态，而是将更改推送到全局状态。似乎它使用的是对象而不是数组。数据按预期的方式公布。
userStore.ts
addParcel: (input: SingleParcel) => {
set(
produce((state) => {
state.parcel.push({
parcelID: short.generate(),
parcelData: input,
});
})
);
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74141109
复制相关文章
相似问题
腾讯云开发者
