反应 useState 钩子影响状态中使用的默认变量，无论传播运算符，Object.assign 等答案

【问题标题】：React useState hook affecting default variable used in state regardless spread operators, Object.assign and etc反应 useState 钩子影响状态中使用的默认变量，无论传播运算符，Object.assign 等
【发布时间】：2020-12-11 09:44:23
【问题描述】：

我是一位经验丰富的 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.log(defaultParams)

  return (
    <InnerPageContext.Provider
      value={{
        params: params,
        setParam: setParam,
        clearParams:clearParams
      }}
    >
      {children}
    </InnerPageContext.Provider>
  )
}

我在页面上有一个按钮，它调用clearParams 函数，它应该将参数重置为默认值。但它不起作用

即使我 console.log(defaultParams) 在每个提供程序重新呈现时，似乎 defaultParams 变量也会在状态变化时发生变化

我认为这不正常，因为我使用了{...defaultParams}，它应该创建新变量，然后将其传递给useState hook。

我试过了：

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: {},
  })
}

上述方法均无效，但在第 3 次中，我硬编码了与 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 }
    })
  }

【问题讨论】：

我认为我们需要更多关于您如何使用它的上下文。鉴于this（诚然相当粗略）的例子，一切似乎都按预期工作。所以我认为问题在于这里没有显示的代码。

标签： javascript reactjs ecmascript-6 react-hooks use-state

【解决方案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 }
    })
  }

【讨论】：