search

NervJS / taro

开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/
https://docs.taro.zone/
Other
35.64k stars 4.8k forks source link

使用dva时，小程序在运行时无法识别props.dispatch函数 #5748

Closed codlin closed 4 years ago

codlin commented 4 years ago

问题描述

代码功能是页面内有个AtTextarea文本框和一个清空内容的按钮，用户点击清空按钮时将内容清空。

通过setState的方式已经实现，但是我改成通过dva的方式时，出现错误。dva的dispatch函数不被识别。

复现步骤

项目配置为taro+dva+typescript+taro-ui，使用dva时，编译通过，但小程序在运行时无法识别props.dispatch函数。

page.tsx代码：

type PageState = {
  showTipsBar: boolean;
}

type PageStateProps = {
  text: string;
}

type PageDispatchProps = {
  dispatchTextChange: (payload: PromotionInfo) => any;
};
type IProps = PageStateProps & PageDispatchProps;

@connect(
  ({ promotion }) => ({
    text: promotion.text,
  }),
  (dispatch) => ({
    dispatchTextChange(payload: PromotionInfo) {
      dispatch({
        type: 'promotion/textChange',
        payload,
      })
    },
  })
)
class Promotion extends Component<IProps, PageState> {
  ...

  clearText() {
    this.props.dispatchTextChange({ text: '' })
  }

  render() {
    return (
      <View>
          <AtButton type="secondary" size="small" onClick={() => this.clearText()}>
            清空
          </AtButton>
      </View>
    );
  }

model.ts代码：

export default {
  namespace: 'promotion',
  state: {
    text: '',
  },
  reducers: {
    textChange(state: any, { payload }:{ payload: PromotionInfo }) {
      const { text } = payload;
      return {
        ...state,
        text,
      }
    },
  }
};

期望行为

AtTextarea内输入的内容被清空

报错信息

image

thirdScriptError
this.props.dispatchTextChange is not a function;at undefined page handleInput function
TypeError: this.props.dispatchTextChange is not a function
    at Connect.handleTextChange (weapp:///pages/promotion/index.js:101:18)
    at Object.anonymousFunc1 [as onChange] (weapp:///pages/promotion/index.js:161:23)
    at AtTextarea._this.handleInput (weapp:///npm/taro-ui/dist/weapp/components/textarea/index.js:73:19)
    at me.obj.(anonymous function) [as handleInput] (weapp:///vendors.js:3149:36)
    at me.D (eval at n.call.document (http://127.0.0.1:56256/remote-debug/runtime.js?devtools_ignore=true:1:8753), <anonymous>:2:1638912)
    at Ze (eval at n.call.document (http://127.0.0.1:56256/remote-debug/runtime.js?devtools_ignore=true:1:8753), <anonymous>:2:1657880)
    at eval (eval at n.call.document (http://127.0.0.1:56256/remote-debug/runtime.js?devtools_ignore=true:1:8753), <anonymous>:2:1670751)
    at Function.eval (eval at n.call.document (http://127.0.0.1:56256/remote-debug/runtime.js?devtools_ignore=true:1:8753), <anonymous>:2:1671146)
    at Object.eval [as webviewEventCallback] (eval at n.call.document (http://127.0.0.1:56256/remote-debug/runtime.js?devtools_ignore=true:1:8753), <anonymous>:2:1638228)
    at eval (eval at n.call.document (http://127.0.0.1:56256/remote-debug/runtime.js?devtools_ignore=true:1:8753), <anonymous>:2:762512)

系统信息

开发环境信息：

taro info
Taro CLI 2.0.7 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 12.16.1 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.22.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
      npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD

taro doctor
� Taro v2.0.7

√ 诊断完成

检查 Taro 配置 
  [✓] 没有发现问题

检查依赖
  [✓] 没有发现问题

package.json

{
    "name": "aaa",
    "version": "1.0.0",
    "private": true,
    "description": "aaa",
    "templateInfo": {
        "name": "default",
        "typescript": true,
        "css": "sass"
    },
    "scripts": {
        "build:weapp": "taro build --type weapp",
        "build:swan": "taro build --type swan",
        "build:alipay": "taro build --type alipay",
        "build:tt": "taro build --type tt",
        "build:h5": "taro build --type h5",
        "build:rn": "taro build --type rn",
        "build:qq": "taro build --type qq",
        "build:quickapp": "taro build --type quickapp",
        "dev:weapp": "npm run build:weapp -- --watch",
        "dev:swan": "npm run build:swan -- --watch",
        "dev:alipay": "npm run build:alipay -- --watch",
        "dev:tt": "npm run build:tt -- --watch",
        "dev:h5": "npm run build:h5 -- --watch",
        "dev:rn": "npm run build:rn -- --watch",
        "dev:qq": "npm run build:qq -- --watch",
        "dev:quickapp": "npm run build:quickapp -- --watch",
        "lint-staged": "lint-staged",
        "prettier": "prettier --write \"src/**/*.ts\" \"src/**/*.tsx\" \"src/**/*.scss\""
    },
    "author": "guanyun",
    "license": "MIT",
    "dependencies": {
        "@tarojs/components": "2.0.7",
        "@tarojs/components-qa": "2.0.7",
        "@tarojs/redux": "2.0.7",
        "@tarojs/redux-h5": "2.0.7",
        "@tarojs/router": "2.0.7",
        "@tarojs/taro": "2.0.7",
        "@tarojs/taro-alipay": "2.0.7",
        "@tarojs/taro-h5": "2.0.7",
        "@tarojs/taro-qq": "2.0.7",
        "@tarojs/taro-quickapp": "2.0.7",
        "@tarojs/taro-rn": "2.0.7",
        "@tarojs/taro-swan": "2.0.7",
        "@tarojs/taro-tt": "2.0.7",
        "@tarojs/taro-weapp": "2.0.7",
        "babel-runtime": "^6.26.0",
        "dva-core": "^2.0.2",
        "dva-loading": "^3.0.20",
        "dva-model-extend": "^0.1.2",
        "nerv-devtools": "^1.5.6",
        "nervjs": "^1.5.6",
        "redux": "^4.0.5",
        "redux-logger": "^3.0.6",
        "redux-thunk": "^2.3.0",
        "regenerator-runtime": "0.11.1",
        "taro-ui": "^2.3.1"
    },
    "devDependencies": {
        "@tarojs/mini-runner": "2.0.7",
        "@tarojs/webpack-runner": "2.0.7",
        "@types/react": "^16.4.6",
        "@types/webpack-env": "^1.13.6",
        "@typescript-eslint/eslint-plugin": "^2.13.0",
        "@typescript-eslint/parser": "^2.13.0",
        "babel-eslint": "^8.2.3",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-plugin-transform-decorators-legacy": "^1.3.4",
        "babel-plugin-transform-jsx-stylesheet": "^0.6.5",
        "babel-plugin-transform-object-rest-spread": "^6.26.0",
        "babel-plugin-transform-runtime": "^6.23.0",
        "babel-preset-env": "^1.6.1",
        "eslint": "^5.16.0",
        "eslint-config-prettier": "^6.3.0",
        "eslint-config-taro": "2.0.7",
        "eslint-plugin-import": "^2.12.0",
        "eslint-plugin-prettier": "^3.1.1",
        "eslint-plugin-react": "^7.8.2",
        "eslint-plugin-react-hooks": "^1.6.1",
        "eslint-plugin-taro": "2.0.7",
        "husky": "^3.0.5",
        "lint-staged": "^9.3.0",
        "prettier": "^1.18.2",
        "stylelint": "9.3.0",
        "stylelint-config-taro-rn": "2.0.7",
        "stylelint-taro-rn": "2.0.7",
        "typescript": "^3.0.1"
    },
    "lint-staged": {
        "**/*.{ts,tsx,scss}": [
            "prettier --write",
            "git add"
        ]
    },
    "husky": {
        "hooks": {
            "pre-commit": "npm run lint-staged"
        }
    }
}

config/index.js

const config = {
  projectName: 'aaa',
  date: '2020-3-17',
  designWidth: 750,
  deviceRatio: {
    '640': 2.34 / 2,
    '750': 1,
    '828': 1.81 / 2
  },
  sourceRoot: 'src',
  outputRoot: 'dist',
  babel: {
    sourceMap: true,
    presets: [
      ['env', {
        modules: false
      }]
    ],
    plugins: [
      'transform-decorators-legacy',
      'transform-class-properties',
      'transform-object-rest-spread',
      ['transform-runtime', {
        "helpers": false,
        "polyfill": false,
        "regenerator": true,
        "moduleName": 'babel-runtime'
      }]
    ]
  },
  plugins: [],
  defineConstants: {
  },
  mini: {
    postcss: {
      pxtransform: {
        enable: true,
        config: {}
      },
      url: {
        enable: true,
        config: {
          limit: 10240 // 设定转换尺寸上限
        }
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  },
  h5: {
    publicPath: '/',
    staticDirectory: 'static',
    postcss: {
      autoprefixer: {
        enable: true,
        config: {
          browsers: [
            'last 3 versions',
            'Android >= 4.1',
            'ios >= 8'
          ]
        }
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    },
    esnextModules: ['taro-ui']
  }
}

module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({}, config, require('./dev'))
  }
  return merge({}, config, require('./prod'))
}

补充信息

谢谢~~

taro-bot[bot] commented 4 years ago

CC @Chen-jj

taro-bot[bot] commented 4 years ago

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

codlin commented 4 years ago

问题已找到，构造函数中没有初始化props

constructor() {
    super();
    this.state = {
      showTipsBar: true,
    };
  }

应该为

constructor(props) {
    super(props);
    this.state = {
      showTipsBar: true,
    };
  }