typescript 子组件未渲染,但在苗条的 prop 中发生了变化

b4wnujal  于 2023-06-30  发布在  TypeScript
关注(0)|答案(1)|浏览(176)

我曾创造了一个类似的商店:

const initalStore: FileDetailsPayload  = {
        jobID: 0,
        jobName: "",
        lastUploadInfo: {
          status: "",
          rowDetails: [],
          uploadTableData: {
             columns: [],
             data: []
          }
};

function CreateStore() {
    const { subscribe, set, update } = writable(initalStore);

    return {
        subscribe,
        set: (fileDetailList) => set(fileDetailList),
    };
}

export const fileDetailStore = CreateStore();

现在我正在调用一个API来设置存储值,并且我已经在我的组件A中订阅了这个存储

const unsubscribe = fileDetailStore.subscribe((value) => {
        fileDetailsData = {...value};
    });

我在从组件A调用的子组件Table中使用fileDetailsData

<Table tableData={fileDetailsData.uploadTableData} />

**问题:**每当我在store中设置新数据时,store都会更新,并且可以看到组件A中store的更新值,但是当prop更改时,子组件Table不会重新渲染。所以总的来说,我希望我的子组件得到重新呈现的任何改变 prop

wrrgggsh

wrrgggsh1#

这不是svelte的问题,而是uploadTableData的引用没有改变,要知道,当你在做{...value}的时候,你改变的是根引用,而不是内部引用。
你需要深度克隆filedetails的整个对象-
使用structuredClone或通过字符串化和解析来破解它
structuredClone

const unsubscribe = fileDetailStore.subscribe((value) => {
        fileDetailsData = structuredClone(value);
    });

const unsubscribe = fileDetailStore.subscribe((value) => {
                fileDetailsData = JSON.parse(JSON.stringify(value))
            });

相关问题