Svelte子组件props变更时未重新渲染问题排查与解决

一、Store定义 #

我在Svelte中创建了如下Store：

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

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

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

export const fileDetailStore = CreateStore();

二、组件A中的订阅与传参 #

调用API更新Store值后，在组件A中订阅该Store：

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

随后将fileDetailsData传递给子组件Table：

<Table tableData={fileDetailsData.uploadTableData} />

三、问题 #

更新Store后，组件A能显示最新值，但Table子组件并未随props变更重新渲染，期望子组件在props变化时自动重新渲染。

四、原因分析 #

问题出在Table子组件内部：本地变量仅在组件初始化时赋值一次，未与props建立响应式关联，当父组件传递的tableData更新时，这些本地变量不会自动更新，导致组件无法重新渲染。

五、解决方案 #

使用Svelte的响应式声明（$:标记），让本地变量随props变化自动重新计算：

原Table组件代码 #

<script>
export let tableData: TableData = { columns: [], data: [] };

let columnData = tableData.columns || [];
let rowData = tableData.data || [];
let rowDataCopy = rowData.slice();
</script>
<div>
<!-- 使用columnData和rowDataCopy -->
</div>

修改后Table组件代码 #

<script>
export let tableData: TableData = { columns: [], data: [] };

$: columnData = tableData.columns || [];
$: rowData = tableData.data || [];
$: rowDataCopy = rowData.slice();
</script>
<div>
<!-- 使用columnData和rowDataCopy -->
</div>

内容的提问来源于stack exchange，提问作者Muskan Rawal