使用扩展运算符更新状态导致数组出现重复对象问题排查

• 状态更新逻辑错误：你用[...dataCards,...dataArray]更新dataCards时，是把之前已有的数据和新过滤出的dataArray做拼接。每次useEffect触发（比如userWidgetDetails或customizeWidget变化），都会重复追加同一批数据，自然导致数组里出现大量重复项。
• 原数组本身存在重复数据：你提供的w数组里已经有两个widgetId=28的完全相同的对象，即使修复了状态更新逻辑，这两个重复项也会被保留，如果不需要的话得额外处理去重。

方案1：直接覆盖状态（推荐，适用于每次需要最新过滤结果的场景） #

把setDataCards([...dataCards,...dataArray])改成setDataCards(dataArray)，这样每次useEffect触发时，都会用最新过滤出的dataArray完全替换旧的dataCards，不会有重复追加的问题：

const [dataCards,setDataCards]=useState([]);

useEffect(() => {
    if(Object.keys(userWidgetDetails).length>0){
     
     const {widgets}=userWidgetDetails;
     let dataArray=widgets.filter(s=>s.type==='card')
     setDataCards(dataArray) // 直接替换，不再拼接旧数据
    }
}, [userWidgetDetails,customizeWidget])

方案2：去重处理（适用于需要累计数据但避免重复的场景） #

如果你的需求是保留历史数据但不能有重复项，可以根据widgetId做去重后再更新：

const [dataCards,setDataCards]=useState([]);

useEffect(() => {
    if(Object.keys(userWidgetDetails).length>0){
     
     const {widgets}=userWidgetDetails;
     let dataArray=widgets.filter(s=>s.type==='card')
     // 合并新旧数据后根据widgetId去重
     const combinedData = [...dataCards,...dataArray]
     const uniqueData = Array.from(new Set(combinedData.map(item => item.widgetId)))
                             .map(id => combinedData.find(item => item.widgetId === id))
     setDataCards(uniqueData)
    }
}, [userWidgetDetails,customizeWidget])

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