Я опытный разработчик js/React, но столкнулся со случаем, который не могу решить, и не знаю, как это исправить.
У меня есть один провайдер контекста со многими разными состояниями, но одно состояние выглядит следующим образом:
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.info(defaultParams)
return (
<InnerPageContext.Provider
value = {{
params: params,
setParam: setParam,
clearParams:clearParams
}}
>
{children}
</InnerPageContext.Provider>
)
}
У меня есть одна кнопка на странице, которая вызывает функцию clearParams
, и она должна сбросить параметры до значения по умолчанию.
Но это не работает
Даже когда я console.info(defaultParams)
перерисовываю каждый провайдер, кажется, что переменная defaultParams
также меняется при изменении состояния
Я не думаю, что это нормально, потому что я использовал {...defaultParams}
, и он должен создать новую переменную, а затем передать ее хуку 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, и когда пользователь очищает параметры, восстанавливает их.
Ребята, у вас есть идеи, как это сделать?
Редактировать: Вот как я обновляю свои параметры:
const setParam = (key, value, type = null) => {
setParams(old => {
if (type) {
old[type][key] = value
} else old[key] = value
console.info('Params', old)
return { ...old }
})
}
пожалуйста, покажите, как вы обновляете «параметры».
если в коде есть что-то подобное "params.attrs.test=true" то defaultParams будет изменен
если old[type]
не является простым типом, он сохраняет ссылку на тот же объект в defaultParams. defaultParams.attrs === params.attrs
. Так как во время инициализации вы разрушаете объект, но не его вложенные объекты.
проблема здесь: 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 }
})
}
ты спас меня друг Это случилось со мной в компоненте
Я думаю, нам нужно немного больше контекста того, как вы это используете. Учитывая этот (по общему признанию, довольно грубый) пример, кажется, что все работает так, как ожидалось. Поэтому я бы предположил, что проблема заключается в коде, который здесь не показан.