使用Redux Toolkit遇报错：Objects are not valid as a React child 求排查

错误原因 #

你在Counter组件中通过useSelector获取的counter是整个Redux状态中的counter对象（包含counter: 0和showCounter: true两个属性），而React无法直接将对象作为DOM子元素渲染，这就是报错的核心原因。

解决方案 #

1. 修正useSelector取值逻辑
   将Counter组件中的useSelector语句修改为获取具体的counter数值，替换原代码中的对应行：

   // 方式1：直接提取嵌套的counter属性
   const counter = useSelector(({ counter }) => counter.counter);
   // 或者方式2：解构赋值，可读性更强
   const { counter } = useSelector(state => state.counter);
   

2. 补充toggleCounterHandler的实现
   原代码中toggleCounterHandler是空函数，需要添加dispatch逻辑才能实现计数器显示切换：

   const toggleCounterHandler = () => {
     dispatch(counterActions.toogleCounter());
   };
   

修改完成后，JSX中渲染的将是具体的数值而非对象，报错即可解决。

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