Хук React useState, влияющий на переменную по умолчанию, используемую в состоянии, независимо от операторов распространения, Object.assign и т. д

Я опытный разработчик 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 }
    })
  }

Я думаю, нам нужно немного больше контекста того, как вы это используете. Учитывая этот (по общему признанию, довольно грубый) пример, кажется, что все работает так, как ожидалось. Поэтому я бы предположил, что проблема заключается в коде, который здесь не показан.

Yoshi 14.12.2020 10:23
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
192
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

пожалуйста, покажите, как вы обновляете «параметры».

если в коде есть что-то подобное "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 }
    })
  }

ты спас меня друг Это случилось со мной в компоненте

Husdady 30.06.2022 18:46

Другие вопросы по теме