Redux默认存储中传递含函数的对象引发React警告及函数失效问题求助

看起来你遇到了几个关联的问题，我们一步步来拆解解决：

1. bgColor函数无法生效 + "函数不能作为React子元素"警告 #

Redux的核心原则之一是state必须是可序列化的纯数据（比如字符串、数字、对象、数组），函数是不能被序列化的，而且直接在state里存储函数本身就是不推荐的做法。

你在defaultStore里定义的bgColor是一个函数，但在Sidebar组件中直接使用props.designState.bgColor时，你只是引用了这个函数，并没有调用它，所以它不会返回SidebarBgColor的值。更糟的是，当你把这个函数作为style.backgroundColor的值时，React会把它当成一个React子元素来处理，从而触发警告。

解决办法： #

去掉state里的函数，改用纯数据：

• 如果bgColor和SidebarBgColor是同一个值，完全不需要单独存储bgColor，直接在组件里使用props.designState.SidebarBgColor即可：

  // 修改defaultStore，删除bgColor函数
  export const defaultStore = {
    token: false,
    user: false,
    cart: {},
    design: {
      designColor: "#49ff03",
      SidebarBgColor: "#3668cf",
      textBaseColor: "#f3ecec",
    },
    componentDisplay: {
      sidebarDisplay:"maximize",
    }
  }
  
  // 然后在Sidebar组件里修改style：
  style={{ backgroundColor: props.designState.SidebarBgColor, color: props.designState.textBaseColor, width: sidebarWidth() }}
  

• 如果你确实需要单独维护bgColor，那就在初始化时直接赋值为SidebarBgColor的初始值，后续通过reducer更新时保持同步：

  export const defaultStore = {
    // ...其他属性
    design: {
      designColor: "#49ff03",
      SidebarBgColor: "#3668cf",
      bgColor: "#3668cf", // 和SidebarBgColor初始值一致
      textBaseColor: "#f3ecec",
    },
    // ...
  }
  

2. "React无法识别DOM元素上的sidebarState属性"警告 #

这个警告通常是因为你把sidebarState这个属性直接传递给了某个DOM元素（比如div、button等），而React不知道这个自定义属性。

检查你的SidebarResponsiveButton组件实现，看看是不是把sidebarState作为props传递给了内部的DOM元素。比如如果SidebarResponsiveButton里有类似这样的代码：

function SidebarResponsiveButton(props) {
  return <button sidebarState={props.sidebarState}>{props.children}</button>
}

就会触发这个警告。解决办法是：

• 如果不需要在DOM上显示这个属性，就不要把它传递给DOM元素；
• 如果确实需要在DOM上使用这个自定义属性，要改成小写的sidebarstate（HTML属性是大小写不敏感的，React要求自定义DOM属性用小写）。

另外，注意你的Sidebar组件的connect代码最后有个拼写错误：minimizeSidebarDisplayA应该是minimizeSidebarDisplayAction，这个错误可能导致部分功能失效，记得修正。

3. Reducer的优化建议 #

你的reducer里存在直接赋值state = {...state}的写法，虽然最终返回了新的state，但Redux reducer应该是纯函数，最好直接返回新对象，避免不必要的变量赋值，让代码更清晰：

case "changeDesign" :
  console.log("yeah")
  return {
    ...state,
    design: {
      designColor: action.payload.designColor,
      bgColor: action.payload.bgColor,
      textBaseColor: action.payload.textBaseColor,
    }
  }

其他case也可以改成这种直接返回的写法。

内容的提问来源于stack exchange，提问作者hsn u