React - 嵌套對象和 useState 正在改變原始 state

Question

我創建了單選按鈕，在選擇時過濾數據。 當我過濾嵌套對象時， originalData 似乎發生了變異。 因此，當我再次 select All 時，它不會恢復到原始數據。 誰能看到為什么過濾數據和原始數據都在更新？ 在此先感謝您的幫助。

我已閱讀“如果您的 object 包含嵌套對象，這些嵌套對象將通過引用而不是按值復制。因此，如果您更改嵌套 object，您將改變原始 ZA8CFDE6331BD59EB2AC96F8911C4B666，但如果我可以更新我的代碼還是我需要一個庫？

   const [filters, setFilters] = useState({
            type: 'All',
            risk: [],
            difficulty: 'All'
        })
    const [originalData, setOriginalData] = useState({...props.offerCategories}) 
    const [filteredData, setFilteredData] = useState({...originalData})
    
    useEffect(()=> {
            const{type, risk, difficulty} = filters;
    
            if(type !== 'All'){
                    let tempList = {...filteredData}
                    filteredData.offer_sub_categories.forEach((category, i)=> {
                        const list = category.offers.map((offer)=> {
                            const offerTags = offer.offer_tags.filter((tag)=> tag.Tag === type)
                            if(offerTags.length === 1) return offer
                        }).filter(tag => tag != undefined);
                        tempList.offer_sub_categories[i].offers = list;
                    })
                    setFilteredData(tempList)
                }
            } 
            if(type === 'All'){
                setFilteredData(originalData)
            }
            
            
        }, [filters])

Answer 1

擴展運算符不會克隆嵌套對象。 您可以將代碼更新為

   const [filters, setFilters] = useState({
            type: 'All',
            risk: [],
            difficulty: 'All'
        })
    const [originalData, setOriginalData] = useState({...props.offerCategories}) 
    const [filteredData, setFilteredData] = useState({...originalData})
    
    useEffect(()=> {
            const{type, risk, difficulty} = filters;
    
            if(type !== 'All'){
                    const offer_sub_categories = filteredData.offer_sub_categories.map((category, i)=> {
                        const offers = category.offers.filter((offer)=> {
                            const offerTags = offer.offer_tags.filter((tag)=> tag.Tag === type)
                            return offerTags.length === 1;
                        });
                        return {...category,offers};
                    });
                setFilteredData({...filteredData,offer_sub_categories});
            } 
            if(type === 'All'){
                setFilteredData(originalData)
            }
            
            
        }, [filters])