警告:getInitialState是在DimensionPicker上定义的,这是一个普通的JavaScript类。这仅适用于使用React.createClass创建的类

时间:2016-01-25 00:39:47

标签: reactjs

我正在尝试编写我的第一个反应控件。这是我写的

import React from 'react';
import DimensionPickerAction from '../actions/DimensionPickerActions.js';
import MovieLensAppStore from '../stores/MovieLensAppStore.js';

class DimensionPicker extends React.Component {

    constructor(props) {
        super(props);
        this.state = { items: [], currentItem: '' };
    }

    getInitialState() {
        this.state = {
            items: MovieLensAppStore.getAttributes(this.props.dimension),
            currentItem : MovieLensAppStore.getCurrentAttribute(this.props.dimension)
        };
    }

    onSelectionChange(newValue) {
        DimensionPickerAction.selectionChange(this.props.dimension, newValue);
    }

    render() {
        var optionNodes = this.state.items.map((item) => {
            if (item === this.state.currentItem) 
                return(<option value="{item}" selected>{item}</option>)             
            else
                return(<option value="{item}">{item}</option>)
        });
        return(<div><select onchange="onSelectionChange">{optionNodes}</select></div>);
    }

}

export default DimensionPicker;

非常令人惊讶,我收到了错误

Warning: getInitialState was defined on DimensionPicker, a plain JavaScript 
class. This is only supported for classes created using React.createClass. Did 
you mean to define a state property instead?

我发现这很令人困惑,因为很明显我的组件派生自React.Component

2 个答案:

答案 0 :(得分:4)

Eric的评论是正确的。您正在使用ES6类,这意味着不支持getInitialState。你需要改变这个:

class DimensionPicker extends React.Component {

    constructor(props) {
        super(props);
        this.state = { items: [], currentItem: '' };
    }

    getInitialState() {
        this.state = {
            items: MovieLensAppStore.getAttributes(this.props.dimension),
            currentItem : MovieLensAppStore.getCurrentAttribute(this.props.dimension)
        };
    }

到此:

class DimensionPicker extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            items: MovieLensAppStore.getAttributes(props.dimension),
            currentItem : MovieLensAppStore.getCurrentAttribute(props.dimension)
        };
    }

答案 1 :(得分:1)

如果你想将初始状态结构保存在某个地方以备后用:

class DimensionPicker extends React.Component {

  constructor(props) {
    super(props);
    this._getInitialState = this._getInitialState.bind(this)
    this.state = this._getInitialState();
  }

  _getInitialState() {
    return { items: [], currentItem: '' }
  }