React useState 钩子影响状态中使用的默认变量，无论扩展运算符

Question

我是经验丰富的 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钩子。

我努力了：

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.log('Params', old)

      return { ...old }

    })

  }

Answer 1

请说明您如何更新“params”。如果代码“params.attrs.test = true”中有类似的内容，那么defaultParams将被更改如果old[type]不是简单类型，它会在 defaultParams 中存储对同一对象的引用。defaultParams.attrs === params.attrs。因为在初始化期间您解构了一个对象，但没有解构其嵌套对象。问题就在这里：old[type][key] = value解决方案：const setParam = (key, value, type = null) => {&nbsp; &nbsp; setParams(old => {&nbsp; &nbsp; &nbsp; if (type) {&nbsp; &nbsp; &nbsp; &nbsp; old[type] = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...old[type],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key: value,&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; } else old[key] = value&nbsp; &nbsp; &nbsp; return { ...old }&nbsp; &nbsp; })&nbsp; }