最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【未解决】antd-mobile中的DatePicker出错:PopupMixin.js Uncaught TypeError: this.setState is not a function

ReactJS crifan 866浏览 0评论

折腾:

【记录】去试用Ant Design的UI

期间,去用代码尝试看看antd-mobile的DatePicker效果如何。

代码:

import moment from ‘moment’;
import ‘moment/locale/zh-cn’;
import { DatePicker } from ‘antd-mobile’;
  constructor(props) {
    super(props);
    moment.locale(‘zh-cn’);
}
           <DatePicker defaultValue={moment(‘2015-01-01’, ‘YYYY-MM-DD’)} />

竟然出错时显示的是: 

PopupMixin.js?f7d1:39 Uncaught TypeError: this.setState is not a function
    at Object.componentWillReceiveProps (eval at <anonymous> (bundle_fa34485….js:8012), <anonymous>:39:18)
    at setComponentProps (eval at <anonymous> (bundle_fa34485….js:753), <anonymous>:236:71)
    at renderComponent (eval at <anonymous> (bundle_fa34485….js:753), <anonymous>:269:100)
    at setComponentProps (eval at <anonymous> (bundle_fa34485….js:753), <anonymous>:244:103)
    at renderComponent (eval at <anonymous> (bundle_fa34485….js:753), <anonymous>:269:100)
    at setComponentProps (eval at <anonymous> (bundle_fa34485….js:753), <anonymous>:244:103)
    at buildComponentFromVNode (eval at <anonymous> (bundle_fa34485….js:753), <anonymous>:319:13)
    at idiff (eval at <anonymous> (bundle_fa34485….js:753), <anonymous>:134:57)
    at innerDiffNode (eval at <anonymous> (bundle_fa34485….js:753), <anonymous>:178:21)
    at idiff (eval at <anonymous> (bundle_fa34485….js:753), <anonymous>:147:65)

即:

别的日期时间的库:

rmc-picker/lib

暂时就不去试了。

抽空再说。

后来发现,自己项目中有这个库:

而好像不是:

antd-mobile所依赖的库?

结果再去看看,果然是其所依赖的:

所以,放弃了。

rmc-picker PopupMixin.js Uncaught TypeError: this.setState is not a function

Why this.setState is undefined in React ES6 class? · Issue #283 · goatslacker/alt

说是:

ES6中的,取消了自动绑定this了 -》 所以需要自己去手动绑定。

但是此处的函数中,一是没有constructor,不方便加绑定,而是改为:

    componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
        if (‘value’ in nextProps) {
            this.setState({
                pickerValue: nextProps.value
            });
        }
        if (‘visible’ in nextProps) {
            this.setVisibleState(nextProps.visible);
        }
    }.bind(this),

还是不行。

还是rmc-picker自己没有适配好ES6。

算了,放弃之。

【后记】

再去试试单列的Picker

PickerView – Ant Design

结果试了半天:

import { PickerView } from ‘antd-mobile’;
  state = {
    choosedProcessValue : “3”,
    // choosedProcessValue : null,
  processList = [
    {
      label: ‘确认发情’,
      value: “3”
    },
    {
      label: ‘未发情’,
      value: “2”
    }
  ];
        <PickerView
          onChange={this.onPickChange}
          value={[this.state.choosedProcessValue]}
          data={this.processList}
          cascade={false}
          cols={1}
          styles={“height: 200px;”}
        />

都还是无法显示出来:

算了,放弃。

不过感觉是刚才看错了,应该用:

Picker – Ant Design

才是,点击弹出,选择后,消失的。

然后也是折腾了半天:

import { Picker, List } from ‘antd-mobile’;
          // onChange={this.onPickChange}
          // value={[this.state.choosedProcessValue]}
          // <List.Item arrow=”horizontal”>选择地区(单列)</List.Item>
      <div>
        <Picker
          data={this.processList}
          cols={1}
        >
        </Picker>
      </div>

最后还是和前面一样的错误:

总之:

此处,对于Picker,不论是DatePicker,还是Picker,还是PickerView,内部都是使用了rmc-picker,都是出错,没法使用。

转载请注明:在路上 » 【未解决】antd-mobile中的DatePicker出错:PopupMixin.js Uncaught TypeError: this.setState is not a function

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
67 queries in 0.242 seconds, using 18.86MB memory