Functions are not valid as a React child. This may happen if you return a Component instead of ＜Com

holicc

于 2023-04-19 11:15:50 发布

阅读量116

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/holicc/article/details/130239613

版权

最近正在学习react的redux，刚用store.subscribe(action)监测状态，就发生了一下的错误：

从网上看了一些资料，发现各有各的问题，但是报错都是类似的。

因为我没有添加路由，所以只能把调用方法的地方都检查一遍。果然发现问题了，在reducer.js方法定义的时候，我返回了函数而不是状态值。【初级错误，捂脸ing】

下面代码是报错的代码；

export default function countReducer(prestate = initState, action) {
  const { type, data } = action;
  console.log(prestate, type, data, "---reducue");
  switch (type) {
    case INCREMENT:
      return () => prestate + data;
    case DECREMENT:
      return () => prestate - data;
    default:
      return prestate;
  }
}

下面是更正后的代码：

export default function countReducer(prestate = initState, action) {
  const { type, data } = action;
  console.log(prestate, type, data, "---reducue");
  switch (type) {
    case INCREMENT:
      return prestate + data;
    case DECREMENT:
      return prestate - data;
    default:
      return prestate;
  }
}

reducer.js是纯粹的js函数，返回的应该是数值而不是箭头函数。所以这里报错了。

以上是整个解决过程，希望对你有帮助~