问题描述 #

基于用户输入生成PDF，列表状态存储在Redux Slice中，新增、修改功能正常，但删除列表项时触发错误：

Eo is not a function TypeError: Eo is not a function

删除操作后PDF未按预期重绘更新内容，使用的库版本：

"@react-pdf/renderer": "^4.3.0",
"react": "^19.1.0",

核心原因推测 #

1. 不稳定的key引发组件复用异常：WorkPdf中使用数组index作为Text组件的key，删除项后index会偏移，React的diff算法会错误复用组件，导致react-pdf渲染逻辑混乱。
2. PDFViewer未触发强制重渲染：PDFViewer的key固定为testing，数据变化时React判定组件未变更，不会重新生成PDF内容。
3. 节流数据更新不及时：throttledExperiencesData可能在删除操作后未同步更新，导致PDF读取旧数据引发渲染错误。

解决方案 #

1. 替换index为唯一标识key #

确保每个work项带有唯一id（比如Redux中存储的带id的数据），用id作为组件key：

// Work.tsx
export const WorkPdf: React.FC<WorkPdfProps> = ({ works }: WorkPdfProps) => {
    const t = works.map((v) => {
        // 假设每个work项存在唯一id字段
        return (
            <Text key={v.id}>{v.role}</Text>
        )
    })
    return (
       <View>
            <Text>Work</Text>
            {t}
       </View>
    )
}

2. 给PDF相关组件添加动态key #

用数据的动态标识（比如数组长度、哈希值）作为PDFViewer或DefaultPdf的key，强制数据变化时重新渲染：

// PdfPreview.tsx
return (
    <PDFViewer 
        key={`pdf-viewer-${throttledExperiencesData.length}`} 
        width="100%" 
        height={window.innerHeight} 
        showToolbar={false}
    >
        <DefaultPdf
            personaData={throttledPersonaData}
            secondaryColor={props.secondaryColor}
            experiences={throttledExperiencesData}
        />
    </PDFViewer>
);

3. 调整节流函数的时效性 #

确保删除操作触发后，throttledExperiencesData能及时更新。可以缩短节流等待时间，或者在删除动作执行后手动触发一次数据同步，避免旧数据残留。

验证步骤 #

1. 确认每个work项都使用唯一id作为key；
2. 确认PDFViewer的key为动态值；
3. 测试删除操作，观察PDF是否正常更新且无错误抛出。

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