我曾创造了一个类似的商店:
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
1条答案
按热度按时间wrrgggsh1#
这不是svelte的问题,而是
uploadTableData
的引用没有改变,要知道,当你在做{...value}
的时候,你改变的是根引用,而不是内部引用。你需要深度克隆filedetails的整个对象-
使用
structuredClone
或通过字符串化和解析来破解它structuredClone
或