taro 3.0版本后 函数编程(hooks) redux报warning

[lang-strive]

相关平台

微信小程序

复现仓库

https://taro-docs.jd.com/taro/docs/hooks
小程序基础库: 2.12.0
使用框架: React

复现步骤

用hooks redux �connect 时候会报warning
在h5,weapp小程序,apply小程序都报warning

期望结果

不报warning

实际结果

报warning

环境信息

👽 Taro v3.0.2


  Taro CLI 3.0.2 environment info:
    System:
      OS: macOS 10.15.2
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 12.14.0 - /usr/local/node/bin/node
      Yarn: 1.22.4 - /usr/local/node/bin/yarn
      npm: 6.13.4 - /usr/local/node/bin/npm
    npmPackages:
      @tarojs/components: 3.0.2 => 3.0.2
      @tarojs/mini-runner: 3.0.2 => 3.0.2
      @tarojs/react: 3.0.2 => 3.0.2
      @tarojs/runtime: 3.0.2 => 3.0.2
      @tarojs/taro: 3.0.2 => 3.0.2
      @tarojs/webpack-runner: 3.0.2 => 3.0.2
      babel-preset-taro: 3.0.2 => 3.0.2
      eslint-config-taro: 3.0.2 => 3.0.2
      react: ^16.10.0 => 16.13.1
    npmGlobalPackages:
      typescript: 3.8.3

[MatrixAge]

我也是这个问题，官方文档给的@tarojs/redux 根本用不了（ taro3.0.2 小程序2.11.3 dva2.0.2 App组件和其他组件都用的是函数式组件），报错：

The above error occurred in the <Provider> component
Consider adding an error boundary to your tree to customize error handling behavior.

MiniProgramError
Cannot call a class as a function
TypeError: Cannot call a class as a function

拉了官方给的Typescript Redux模版，发现用的是react-redux，果断换成react-redux，但是会出现如上面issue中说的报错，尽管不影响功能。

用React.forwardRef将函数组件包一层，会隐藏这和错误，但是会引起新的问题，就是未绑定ref，所以需要你们的帮组，摸摸哒。

[MatrixAge]

没有人大神来指出问题吗，强迫症表示很是难受

[Chen-jj]

Taro 会给页面组件传递 forwardRef 用于获取页面实例，但 react-redux 的 HOC 传递 forwardRef 时没有判断 WrappedComponent 是否是 Functional Component，然后就会出现这个 warning。

如果在 Taro 里判断页面 component 是 react-redux 的 HOC 且里面的 WrappedComponent 是函数式组件，这样不好判断而且除了 react-redux Taro 还会兼容其它状态管理库，这样做不太合理。

因此，建议使用 Class Component 或在使用函数式组件时使用 useSelector、useDispatch、useStore 代替 connect function

[lang-strive]

Taro 会给页面组件传递 forwardRef 用于获取页面实例，但 react-redux 的 HOC 传递 forwardRef 时没有判断 WrappedComponent 是否是 Functional Component，然后就会出现这个 warning。

如果在 Taro 里判断页面 component 是 react-redux 的 HOC 且里面的 WrappedComponent 是函数式组件，这样不好判断而且除了 react-redux Taro 还会兼容其它状态管理库，这样做不太合理。

因此，建议使用 Class Component 或在使用函数式组件时使用 useSelector、useDispatch、useStore 代替 connect function

好的，谢谢🙏