联动组件 Picker 报错

[zzh3319]

Version

1.6.0

Environment

windows chorme "react": "^15.3.1",

Reproduction link

https://mobile.ant.design/components/picker-cn/

Steps to reproduce

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of Cascader. in Cascader (created by Unknown) in div (created by Unknown) in div (created by Dialog) in div (created by Dialog) in div (created by LazyRenderBox) in LazyRenderBox (created by Dialog) in AnimateChild (created by Animate) in Animate (created by Dialog) in div (created by Dialog) in div (created by Dialog) in Dialog printWarning @ warning.js:35 warning @ warning.js:59 createElement @ ReactElementValidator.js:192 (anonymous) @ Cascader.js:131 (anonymous) @ Cascader.js:130 getCols @ Cascader.js:127 render @ Cascader.js:147 (anonymous) @ ReactCompositeComponent.js:795 measureLifeCyclePerf @ ReactCompositeComponent.js:75 _renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js:794 _renderValidatedComponent @ ReactCompositeComponent.js:821 performInitialMount @ ReactCompositeComponent.js:361 mountComponent @ ReactCompositeComponent.js:257 mountComponent @ ReactReconciler.js:45 mountChildren @ ReactMultiChild.js:236 _createInitialChildren @ ReactDOMComponent.js:703 mountComponent @ ReactDOMComponent.js:522 mountComponent @ ReactReconciler.js:45 mountChildren @ ReactMultiChild.js:236 _createInitialChildren @ ReactDOMComponent.js:703 mountComponent @ ReactDOMComponent.js:522 mountComponent @ ReactReconciler.js:45 mountChildren @ ReactMultiChild.js:236 _createInitialChildren @ ReactDOMComponent.js:703 mountComponent @ ReactDOMComponent.js:522 mountComponent @ ReactReconciler.js:45 mountChildren @ ReactMultiChild.js:236 _createInitialChildren @ ReactDOMComponent.js:703 mountComponent @ ReactDOMComponent.js:522 mountComponent @ ReactReconciler.js:45 performInitialMount @ ReactCompositeComponent.js:370 mountComponent @ ReactCompositeComponent.js:257 mountComponent @ ReactReconciler.js:45 performInitialMount @ ReactCompositeComponent.js:370 mountComponent @ ReactCompositeComponent.js:257 mountComponent @ ReactReconciler.js:45 performInitialMount @ ReactCompositeComponent.js:370 mountComponent @ ReactCompositeComponent.js:257 mountComponent @ ReactReconciler.js:45 mountChildren @ ReactMultiChild.js:236 _createInitialChildren @ ReactDOMComponent.js:703 mountComponent @ ReactDOMComponent.js:522 mountComponent @ ReactReconciler.js:45 mountChildren @ ReactMultiChild.js:236 _createInitialChildren @ ReactDOMComponent.js:703 mountComponent @ ReactDOMComponent.js:522 mountComponent @ ReactReconciler.js:45 performInitialMount @ ReactCompositeComponent.js:370 mountComponent @ ReactCompositeComponent.js:257 mountComponent @ ReactReconciler.js:45 performInitialMount @ ReactCompositeComponent.js:370 mountComponent @ ReactCompositeComponent.js:257 mountComponent @ ReactReconciler.js:45 mountComponentIntoNode @ ReactMount.js:104 perform @ Transaction.js:143 batchedMountComponentIntoNode @ ReactMount.js:126 batchedUpdates @ ReactDefaultBatchingStrategy.js:60 batchedUpdates @ ReactUpdates.js:97 _renderNewRootComponent @ ReactMount.js:319 _renderSubtreeIntoContainer @ ReactMount.js:401 renderSubtreeIntoContainer @ ReactMount.js:342 _renderComponent @ getContainerRenderMixin.js:49 componentDidMount @ getContainerRenderMixin.js:61 chainedFunction @ factory.js:617 (anonymous) @ ReactCompositeComponent.js:264 measureLifeCyclePerf @ ReactCompositeComponent.js:75 (anonymous) @ ReactCompositeComponent.js:263 notifyAll @ CallbackQueue.js:76 close @ ReactReconcileTransaction.js:80 closeAll @ Transaction.js:209 perform @ Transaction.js:156 perform @ Transaction.js:143 perform @ ReactUpdates.js:89 flushBatchedUpdates @ ReactUpdates.js:172 closeAll @ Transaction.js:209 perform @ Transaction.js:156 batchedUpdates @ ReactDefaultBatchingStrategy.js:62 batchedUpdates @ ReactUpdates.js:97 dispatchEvent @ ReactEventListener.js:147 warning.js:35 Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using

. See https://fb.me/react-warning-keys for more information. in div in Unknown (created by Unknown) in div (created by Unknown) in div (created by Unknown) in Unknown (created by Cascader) in Cascader (created by Unknown) in div (created by Unknown) in div (created by Dialog) in div (created by Dialog) in div (created by LazyRenderBox) in LazyRenderBox (created by Dialog) in AnimateChild (created by Animate) in Animate (created by Dialog) in div (created by Dialog) in div (created by Dialog) in Dialog

What is expected?

能用

What is actually happening?

不能用

---

https://mobile.ant.design/components/picker-cn/ 实现官方demo 报错

[ant-design-bot]

It will be better to write your issue/comment in English, so more people can understand you. And this means that more people can help you or benefit from your issue/comment. See: https://github.com/ant-design/ant-design/issues/4897

[paranoidjk]

官方 demo 工作正常。

请提供可复现的 demo。

另外请重装依赖，确保你是最新版本的 antd-mobile.

[ant-design-bot]

Hello @zzh3319. Please provide a re-producible demo: https://codepen.io/pen?template=LWpaKe&editors=0010

[zzh3319]

{ "_from": "antd-mobile@^1.6.0", "_id": "antd-mobile@1.6.0", "_inBundle": false, "_integrity": "sha1-MnR39yjIWryRWOfuvksQZxqerKw=", "_location": "/antd-mobile", "_phantomChildren": {}, "_requested": { "type": "range", "registry": true, "raw": "antd-mobile@^1.6.0", "name": "antd-mobile", "escapedName": "antd-mobile", "rawSpec": "^1.6.0", "saveSpec": null, "fetchSpec": "^1.6.0" }, "_requiredBy": [ "/" ], "_resolved": "http://172.17.210.65:4873/antd-mobile/-/antd-mobile-1.6.0.tgz", "_shasum": "327477f728c85abc9158e7eebe4b10671a9eacac", "_spec": "antd-mobile@^1.6.0", "_where": "D:\snv项目\rd-fe-teenmix\Dev\branches\re-fe-teenmix-mobile-zzh", "bugs": { "url": "http://github.com/ant-design/ant-design-mobile/issues" }, "bundleDependencies": false, "config": { "port": 8001 }, "dependencies": { "array-tree-filter": "~1.0.0", "babel-runtime": "6.x", "classnames": "~2.2.1", "create-react-class": "^15.5.2", "moment": "~2.18.1", "normalize.css": "^7.0.0", "omit.js": "~1.0.0", "prop-types": "^15.5.8", "rc-checkbox": "~2.0.0", "rc-collapse": "~1.7.0", "rc-dialog": "~6.5.7", "rc-drawer": "~0.4.9", "rc-input-number": "~3.6.0", "rc-notification": "~2.0.0", "rc-slider": "~8.2.0", "rc-steps": "~2.5.1", "rc-swipeout": "~1.3.0", "rc-table": "~5.4.0", "rc-tabs": "~8.1.0", "rc-tooltip": "~3.4.3", "rc-touchable": "~1.2.2", "react-native-camera-roll-picker": "~1.1.6", "react-native-collapsible": "^0.8.0", "react-native-drawer-layout": "~1.3.0", "react-native-menu": "~0.21.0", "react-native-scrollable-tab-view": "^0.7.2", "rmc-cascader": "^4.1.1", "rmc-date-picker": "^5.3.1", "rmc-list-view": "^0.8.0", "rmc-nuka-carousel": "^2.2.0", "rmc-picker": "^3.8.0", "rn-topview": "~0.1.0", "warning": "^3.0.0" }, "deprecated": false, "description": "基于 React 的移动设计规范实现", "devDependencies": { "@types/react": "^15.0.38", "@types/react-dom": "^15.5.1", "@types/react-native": "^0.46.2", "antd": "2.x", "antd-mobile-demo-data": "^0.1.1", "antd-tools": "^1.7.0", "babel-eslint": "^7.2.3", "babel-plugin-import": "^1.2.1", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-react-native": "^2.0.0", "bisheng": "^0.24.0", "bisheng-plugin-antd": "^0.15.0", "bisheng-plugin-description": "^0.1.1", "bisheng-plugin-react": "^0.5.0", "bisheng-plugin-toc": "^0.4.0", "concurrently": "^3.4.0", "cross-env": "^5.0.1", "dora-plugin-upload": "^0.3.1", "enquire.js": "^2.1.1", "enzyme": "^2.7.1", "enzyme-to-json": "^1.5.0", "eslint": "^4.3.0", "eslint-config-airbnb": "latest", "eslint-plugin-babel": "^4.1.1", "eslint-plugin-import": "^2.7.0", "eslint-plugin-jsx-a11y": "^6.0.2", "eslint-plugin-markdown": "~1.0.0-beta.6", "eslint-plugin-react": "^7.1.0", "eslint-tinker": "^0.4.1", "glob": "^7.1.1", "jest": "^20.0.4", "jsonml.js": "^0.1.0", "lesshint": "^4.0.2", "lint-staged": "^4.0.2", "lodash.debounce": "^4.0.6", "mockdate": "^2.0.1", "postcss-pxtorem": "^3.3.1", "pre-commit": "1.x", "qrcode.react": "^0.7.1", "rc-form": "1.x", "react": "^15.0.0", "react-copy-to-clipboard": "^5.0.0", "react-document-title": "^2.0.1", "react-dom": "^15.0.0", "react-github-button": "^0.1.9", "react-intl": "^2.2.3", "react-native": "~0.42.0", "react-native-code-push": "~1.16.0-beta", "react-native-mock": "^0.3.1", "react-navigation": "^1.0.0-beta.11", "react-test-renderer": "^15.4.2", "stylelint": "^8.0.0", "stylelint-config-standard": "^17.0.0", "svg-sprite-loader": "^0.3.1", "typescript": "~2.4.0", "webpack-visualizer-plugin": "^0.1.11" }, "files": [ "dist", "lib", "es" ], "homepage": "http://mobile.ant.design", "keywords": [ "ant", "design", "react", "react-component", "component", "components", "ui", "framework", "frontend" ], "license": "MIT", "lint-staged": { "components//*.tsx": [ "lint-staged:ts" ], "{tests,site,scripts,components}/*/.{js,jsx}": [ "lint-staged:es" ], "{site,components}//.less": "stylelint --syntax less", "components//demo/.md": [ "lint-staged:demo" ] }, "main": "lib/warn.js", "module": "es/warn.js", "name": "antd-mobile", "pre-commit": [ "lint-staged" ], "repository": { "type": "git", "url": "git+ssh://git@github.com/ant-design/ant-design-mobile.git" }, "scripts": { "_android": "node node_modules/react-native/local-cli/cli.js run-android --root rn-kitchen-sink", "_ios": "node node_modules/react-native/local-cli/cli.js run-ios --project-path rn-kitchen-sink/ios", "analysis": "npm run dist && node ./scripts/analysis", "android": "concurrently \"npm run watch-tsc\" \"npm run _android\"", "applint": "eslint rn-kitchen-sink --ext '.js'", "authors": "git log --format='%aN <%aE>' | sort -u | grep -v 'users.noreply.github.com' > AUTHORS.txt", "build-rn": "antd-tools run tsc && npm run build-rn-ios && npm run build-rn-android", "build-rn-android": "node scripts/rn-mkdir && node node_modules/react-native/local-cli/cli.js bundle --platform android --dev false --entry-file rn-kitchen-sink/index.android.js --bundle-output rn-kitchen-sink/android/bundle/index.android.bundle --assets-dest rn-kitchen-sink/android/bundle", "build-rn-ios": "node scripts/rn-mkdir && node node_modules/react-native/local-cli/cli.js bundle --platform ios --dev false --entry-file rn-kitchen-sink/index.ios.js --bundle-output rn-kitchen-sink/ios/bundle/index.ios.bundle --assets-dest rn-kitchen-sink/ios/bundle", "clean": "antd-tools run clean", "compile": "BABEL_ENV=dist antd-tools run compile", "demolint": "RUN_ENV=DEMO eslint components//demo/.md --ext '.md'", "deploy": "npm run clean && npm run site && bisheng gh-pages --push-only", "dist": "BABEL_ENV=dist antd-tools run dist", "eslint-fix": "eslint --fix site scripts ./.js --ext '.js,.jsx' && eslint-tinker ./components//demo/.md", "ios": "concurrently \"npm run watch-tsc\" \"npm run _ios\"", "lint": "npm run tslint && npm run srclint && npm run demolint && npm run stylelint && npm run applint", "lint-staged": "lint-staged", "lint-staged:demo": "cross-env RUN_ENV=DEMO eslint --ext '.md'", "lint-staged:es": "eslint ./.eslintrc.js ./webpack.config.js", "lint-staged:ts": "tsc && node node_modules/tslint/bin/tslint -c node_modules/antd-tools/lib/tslint.json components//*.tsx", "pre-publish": "npm run test:all && node ./scripts/build-less-entry", "prepare": "antd-tools run guard", "prepublish": "antd-tools run guard", "prepublishOnly": "antd-tools run guard", "pub": "BABEL_ENV=dist antd-tools run pub", "rn-start": "node node_modules/react-native/local-cli/cli.js start", "site": "concurrently \"bisheng build -c ./site/bisheng.desktop.config.js\" \"bisheng build -c ./site/bisheng.kitchen.config.js\" && node scripts/copy-app-res", "srclint": "eslint site scripts --ext '.js,.jsx'", "start": "concurrently \"bisheng start -c ./site/bisheng.desktop.config.js --no-livereload\" \"bisheng start -c ./site/bisheng.kitchen.config.js --no-livereload\"", "stylelint": "stylelint \"{site,components}/*/.less\" --syntax less", "stylelint-fix": "stylelint \"{site,components}//*.less\" --syntax less --fix", "test": "npm run test:rn && npm run test:web", "test:all": "./scripts/test-all.sh", "test:rn": "jest --config .jest.js", "test:web": "jest --config .jest.web.js", "tslint": "antd-tools run ts-lint && npm run compile && rm -rf lib", "tslint-fix": "antd-tools run ts-lint-fix && npm run compile && rm -rf lib", "watch-tsc": "antd-tools run watch-tsc" }, "typings": "lib/index.d.ts", "version": "1.6.0" }

[zzh3319]

我复制官方demo的代码 在我项目中运行报错

import { Picker, List, WhiteSpace } from 'antd-mobile'; import { createForm } from 'rc-form'; import { connect } from 'dva'; import { district, provinceLite as province } from 'antd-mobile-demo-data'; import React, { Component, PropTypes } from 'react'; // 如果不是使用 List.Item 作为 children console.log(district) const CustomChildren = props => ( <div onClick={props.onClick} style={{ backgroundColor: '#fff', padding: '0 0.3rem' }}

<div style={{ display: 'flex', height: '0.9rem', lineHeight: '0.9rem' }}> <div style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{props.children}

[YoFoon]

I also have this problem but antd-mobile version is 1.0.7

`<Picker data={item.params} okText={.translate("globe","ok")} dismissText={.translate("globe","cancel")} extra={.translate("globe","select")} disabled={item.isRequired === 2 ? true : false} cols={1} {...getFieldProps(item.code, .merge(prop4Sel,{ rules: [{ required: item.isRequired === 1 ? true : false, message: _.translate("globe","select") + item.name }] }) )}

`

item.params =

[paranoidjk]

@ant-design-bot markdown

[ant-design-bot]

Hello @zzh3319, please format your issue in markdown https://segmentfault.com/markdown

[paranoidjk]

Please provide a re-producible demo: https://codepen.io/pen?template=LWpaKe&editors=0010

[deot]

I have the same problem #1646 ,it maybe caused with some dependencies updated； @paranoidjk I've created a sample repo illustrating the problem: link

[YoFoon]

搞了一天，发现是 rmc-cascader 这个包有问题 antd-mobile依赖的是4.3.1 然后手动将 版本降到 4.1.1 之后没有出现这个问题 看了源码，感觉并没有啥。 可能是webpack打包依赖有问题。 @zzh3319 你看下你是不是这样子也可以。

[paranoidjk]

@deot https://github.com/deot/antd-mobile-picker-fail-example/blob/master/app/pages/components/Second.js#L47 This line of code is wrong, you can not use pure text as Picker children, please see our official demo and api doc.

[paranoidjk]

@zzh3319 @YoFoon markdown 代码请格式化，不然无法阅读，另外能否提供可复现的在线 demo ?

参考： https://codepen.io/pen?template=LWpaKe&editors=0010

[deot]

@paranoidjk Sorry,in order to create repo, I delete something. Now, I have add it, but it run failed again; https://github.com/deot/antd-mobile-picker-fail-example/blob/master/app/pages/components/Second.js#L47

[paranoidjk]

@deot works fine. Plase do check it by yourself before you ask for help.

[deot]

@paranoidjk I'm sure I've tested it.I'm so sorry to delay your time,I changed it again. link .

Two Picker components in different files will casued this error in Windows.

This problem also exist in my Mac.

I'm sure install bynpm cache verify && npm install

I tried many times to install the environment, including changing rmc-picker @ 4.0.1,rmc-cascader @ 4.3.4.I can't find the wrong place in the source code

[zzh3319]

@YoFoon thanks a lot as you! say i resolve my problem

[deot]

rmc-cascader @ 4.1.1 , it also run failed in my example

[paranoidjk]

Which antd-mobile version are you guys using?

antd-mobile@1.6.0 will auto install rmc-cascader@4.3.4, and i test that this version works fine.

[zzh3319]

@paranoidjk won"t be wrong? are your sure ? the antsd-mobile is rely to require "rmc-cascader": "^4.1.1" , but antd-mobile@1.6.0 will auto install rmc-cascader@4.3.4, so as the conclusion widthout "rmc-cascader": "^4.1.1"; so appear the error “You likely forgot to export your component from the file it's defined in. Check the render method of Cascader.”

hack method： method（1）： write peerDependencies in your package.json as this "name": "rd-fe-device-register", "peerDependencies": { "rmc-cascader": "4.1.1" },

method （2）： if you Problem is just rely the modules "rmc-cascader": "4.1.1" you can write to the dependencies； as this "dependencies": { "rmc-cascader": "4.1.1", }

[paranoidjk]

@zzh3319 调整下 markdown 语法吧... 太乱了

请你提供一个可复现的 demo，甚至是如上面的用户给一个 push 到 github 的可复现代码库，我都可以帮你排查。

这样描述来描述去，没什么有用信息。

[deot]

@paranoidjk It seemed incredible for me, and I tried it many times in my win or mac.It caused the same results can you give me some other suggest?

Version

Win: npm(3.10.10) node(6.11.0) Mac: npm(5.3.0) node(8.1.1)

[terminalqo]

antd-mobile v1.6.0 react v15.5.4 dva v1.2.1 roadhog v1.0.2 use @YoFoon method succeed!!!

[paranoidjk]

抱歉，尝试了所有的 demo，都没有复现问题。

如果任何人可以一个可复现的 demo，如 codepen 地址，github 仓库等，我可以继续排查。

[paranoidjk]

@silentcloud @warmhug 你们 double check 下这个问题，反馈用户比较多，但我这里无法复现。

[YoFoon]

或许是因为打包问题

这些是全部依赖。 或许是我react版本太低。 但是我尝试升级了react版本 并没有解决。

[paranoidjk]

@YoFoon

• 能否把 antd-mobile 升级至 1.6.2 尝试下？
• 能否将你的代码 push 到 github，并写下重现步骤，然后发给我？

[xieqingtian]

问题解决了，我开始安装的最新的antd-mobile，出现了类似问题，后来我把rmc-cascader包指定为4.1.1版本就可以了。感谢 @YoFoon

[silentcloud]

同样不能重现，能重现的，把代码直接 zip 上传上来吧

[YoFoon]

我搞了一个简化版的。没有重新，心好累哦。 依赖什么的都是跟有错误的一样的。难道是代码问题？

[deot]

@silentcloud 你可以尝试一下，仍然有一样的问题（已测试） 链接.zip

[silentcloud]

👌

[silentcloud]

@deot 我看了你发我的打包项目，是依赖的 rmc-picker 版本不对啊（3.10.x）， antd-mobile 1.6.x 会依赖 4.x 的版本的，我 rm -rf node_modules 然后重装就好了

[deot]

@silentcloud 谢谢

我直接在原基础上npm uninstall rmc-picker && npm install rmc-picker@4.0.1 还是报错，版本还是3.10.7，如下：

后来试了下加入到rm -rf node_modules, 还是一样，但是这次跑起来了，版本还是3.10.7，如下：

之前还是试过比较多次的重装rm -rf node_modules && npm cache verify && npm install, 不知道具体遇到了什么问题，对比两次npm list 也没发现特殊的，暂时先不改变环境了

[ant-design-bot]

Hello @zzh3319.

• If you use npm, please try rm -rf node_modules && npm install to upgrade all your deps.
• If you use yarn, you may need yarn upgrade.

[1048034876]

The problem still exist with all means you said

[silentcloud]

@deot 1.6.x 最新版依赖的 rmc-picker 不可能是 3.10.x ，看一下 3.10 是被谁给依赖了

@1048034876 node_modules 下的 rmc-picker 版本多少

[1048034876]

@silentcloud 升到4.0.1了还是有这个错

[terminalqo]

@paranoidjk @silentcloud rmc-cascader 4.1.1 在 roadhog v1.1.2 下依然报错， 在roadhog v1.0.2下正常。