翻閱古今
2023-11-02 21:23:10
我是經(jīng)驗豐富的 js/React 開發(fā)人員,但遇到了我無法解決的情況,而且我不知道如何修復(fù)它。我有一個具有許多不同狀態(tài)的上下文提供程序,但一種狀態(tài)如下所示:const defaultParams = { ordering: 'price_asc', page: 1, perPage: 15, attrs: {},}const InnerPageContext = createContext()export const InnerPageContextProvider = ({ children }) => { const [params, setParams] = useState({ ...defaultParams }) const clearParams = () => { setParams({...defaultParams}) } console.log(defaultParams) return ( <InnerPageContext.Provider value={{ params: params, setParam: setParam, clearParams:clearParams }} > {children} </InnerPageContext.Provider> )}我在頁面上有一個按鈕,它調(diào)用clearParams函數(shù),并且應(yīng)該將參數(shù)重置為默認(rèn)值。但它不起作用即使當(dāng)我console.log(defaultParams)在每個提供者重新渲染時,defaultParams當(dāng)狀態(tài)改變時變量似乎也在改變我認(rèn)為這不正常,因為我已經(jīng)使用過{...defaultParams},它應(yīng)該創(chuàng)建新變量,然后將其傳遞給useState鉤子。我努力了:const [params, setParams] = useState(Object.assign({}, defaultParams))const clearParams = () => { setParams(Object.assign({}, defaultParams))}const [params, setParams] = useState(defaultParams)const clearParams = () => { setParams(defaultParams)}const [params, setParams] = useState(defaultParams)const clearParams = () => { setParams({ ordering: 'price_asc', page: 1, perPage: 15, attrs: {}, })}除了第三種方法之外,上述方法都不起作用,我將相同的對象硬編碼為defaultParams. 這個想法是將 dafult 參數(shù)保存在某處,當(dāng)用戶清除參數(shù)時恢復(fù)它。你們有什么想法可以做到這一點嗎?編輯: 這就是我更新參數(shù)的方式:const setParam = (key, value, type = null) => { setParams(old => { if (type) { old[type][key] = value } else old[key] = value console.log('Params', old) return { ...old } }) }
1 回答

慕碼人2483693
TA貢獻1860條經(jīng)驗 獲得超9個贊
請說明您如何更新“params”。
如果代碼“params.attrs.test = true”中有類似的內(nèi)容,那么defaultParams將被更改
如果old[type]不是簡單類型,它會在 defaultParams 中存儲對同一對象的引用。defaultParams.attrs === params.attrs。因為在初始化期間您解構(gòu)了一個對象,但沒有解構(gòu)其嵌套對象。
問題就在這里:old[type][key] = value
解決方案:
const setParam = (key, value, type = null) => {
setParams(old => {
if (type) {
old[type] = {
...old[type],
key: value,
}
} else old[key] = value
return { ...old }
})
}
添加回答
舉報
0/150
提交
取消