反應 useState 鈎子影響 state 中使用的默認變量，無論傳播運算符，Object.assign 等

Question

我是經驗豐富的 js/React 開發人員，但遇到了我無法解決的情況，我不知道如何解決它。

我有一個具有許多不同 state 的上下文提供程序，但一個 state 如下所示：

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>
  )
}

我在頁面上有一個按鈕，它調用clearParams function 並且它應該將參數重置為默認值。 但它不起作用

即使我在每個提供程序重新呈現時都使用console.log(defaultParams) ，當 state 更改時， 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: {},
  })
}

上述方法均無效，但第三種方法我將相同的 object 硬編碼為defaultParams 。 這個想法是將dafult參數保存在某處，當用戶清除參數時恢復它。 你們有什么想法很熱嗎？

編輯：這就是我更新參數的方式：

const setParam = (key, value, type = null) => {
    setParams(old => {
      if (type) {
        old[type][key] = value
      } else old[key] = value
      console.log('Params', old)
      return { ...old }
    })
  }

Answer 1

請展示您如何更新“參數”。

如果代碼“params.attrs.test = true”中有類似的內容，那么 defaultParams 將被更改

如果old[type]不是簡單類型，它會在 defaultParams 中存儲對相同 object 的引用。 defaultParams.attrs === params.attrs 。 因為在初始化過程中你解構了 object 而不是它的嵌套對象。

問題出在這里： 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 }
    })
  }