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) => {

    setParams(old => {

      if (type) {

        old[type] = {

          ...old[type],

          key: value,

        }

      } else old[key] = value

      return { ...old }

    })

  }