转换为es6后,React js getInitialState无法正常工作

Question

当我将常规反应javascript代码转换为es6时,我在控制台中收到这两个错误:

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

Uncaught TypeError: Cannot read property 'isTopicClicked' of null

我想isTopicClicked最初设置为false.

import React from 'react';
import ReactDOM from 'react-dom';

class TopicsList extends React.Component {

    getInitialState() {
        return {
            isTopicClicked : false,
            topicPages
        };
    }

    onClick(topicID) {
        this.setState({isTopicClicked : true});
        this.setState({topicsID : topicID});
    }

    render() {
        return (
            <div>
                <div className="row topic-list">
                    <SingleTopicBox 
                        topicID="1" 
                        onClick={this.onClick} 
                        label="Topic"
                        />
                    <SingleTopicBox 
                        topicID="2" 
                        onClick={this.onClick} 
                        label="Topic"
                        />
                    <SingleTopicBox 
                        topicID="3" 
                        onClick={this.onClick} 
                        label="Topic"
                        />
                    <SingleTopicBox 
                        topicID="4" 
                        onClick={this.onClick} 
                        label="Topic"
                        />
                </div>
                <div className="row">
                { this.state.isTopicClicked ? <SelectedTopicPage topicsID={this.state.topicsID} key={this.state.topicsID} topicPages={topicPages} /> : null }
                </div>
            </div>
        );
    }
};


class SingleTopicBox extends React.Component {

    render() {
        return (
            <div>
                <div className="col-sm-2">
                    <div onClick={this.props.onClick.bind(null, this.props.topicID)} className="single-topic" data-topic-id={this.props.topicID}>
                        {this.props.label} {this.props.topicID}
                    </div>
                </div>
            </div>
        );
    }
};

var topicPages = [
    { 
        topic_no: '1',
        topic_pages: [
            {
                headline: 'Topic 1 headline', 
                description: 'Topic 1 description comes here...page 1'
            },
            {
                headline: 'Topic 1 headline', 
                description: 'Topic 1 description comes here...page 2'
            },
            {
                headline: 'Topic 1 headline', 
                description: 'Topic 1 description comes here...page 3'
            }
        ]
    },
    { 
        topic_no: '2',
        topic_pages: [
            {
                headline: 'Topic 2 headline', 
                description: 'Topic 2 description comes here...page 1'
            },
            {
                headline: 'Topic 2 headline', 
                description: 'Topic 2 description comes here...page 2'
            },
            {
                headline: 'Topic 2 headline', 
                description: 'Topic 2 description comes here...page 3'
            }
        ]
    },
    { 
        topic_no: '3',
        topic_pages: [
            {
                headline: 'Topic 3 headline', 
                description: 'Topic 3 description comes here...page 1'
            },
            {
                headline: 'Topic 3 headline', 
                description: 'Topic 3 description comes here...page 2'
            },
            {
                headline: 'Topic 3 headline', 
                description: 'Topic 3 description comes here...page 3'
            }
        ]
    },
    { 
        topic_no: '4',
        topic_pages: [
            {
                headline: 'Topic 4 headline', 
                description: 'Topic 4 description comes here...page 1'
            },
            {
                headline: 'Topic 4 headline', 
                description: 'Topic 4 description comes here...page 2'
            },
            {
                headline: 'Topic 4 headline', 
                description: 'Topic 4 description comes here...page 3'
            }
        ]
    },

];

class SelectedTopicPage extends React.Component {
    getInitialState() {
      return{
        topicPageNo: 0,
        total_selected_topic_pages: 1
      }
    }
    navigateBack() {
        let topicPageNo;
        if (this.state.topicPageNo > 0){
            topicPageNo = this.state.topicPageNo - 1;   
        }
        else {
            topicPageNo = 0;
        }
        this.setState({topicPageNo : topicPageNo});
    }
    navigateNext(totalPagesInSelectedTopic) {
        let topicPageNo;
        if (totalPagesInSelectedTopic > this.state.topicPageNo + 1){
            topicPageNo = this.state.topicPageNo + 1;
        }
        else {
            topicPageNo = this.state.topicPageNo;
        }
        this.setState({topicPageNo : topicPageNo});
    }
    render() {
        let topicsID = this.props.topicsID;
        let topicPageNo = this.state.topicPageNo;
        return (
            <div>
                {this.props.topicPages.filter(function(topicPage) {
                    // if condition is true, item is not filtered out
                    return topicPage.topic_no === topicsID; 
                }).map(function (topicPage) {
                    let totalPagesInSelectedTopic = topicPage.topic_pages.length;
                    return (
                        <div>
                            <div>
                            <SelectedTopicPageMarkup headline={topicPage.topic_pages[0].headline} key={topicPage.topic_no}>
                                {topicPage.topic_pages[topicPageNo].description}
                            </SelectedTopicPageMarkup> 
                            </div>
                            <div>
                                <NextPrevBtn moveNext={this.navigateNext.bind(this, totalPagesInSelectedTopic)} key={topicPage.topic_no} moveBack={this.navigateBack}/>
                            </div>
                        </div>
                    );
                }.bind(this))}
            </div>
        );
    }
};


class SelectedTopicPageMarkup extends React.Component {

    render() {    
        return (
            <div className="topics-page">
                <h1>{this.props.headline}</h1>
                <p>{this.props.children}</p>
            </div>
        );
    }
};


class NextPrevBtn extends React.Component {
    render() {    
        return (
            <div className="next-prev-btn">
                <a onClick={this.props.moveBack} className="btn prev-btn">Back</a>
                <a onClick={this.props.moveNext} className="btn next-btn">Next</a>
            </div>
        );
    }
};

export default TopicsList;

我正在使用带有baber-loader的webpack进行编译.

Answer 1

getInitialState在ES2015中编写组件时不使用.使用constructor()替代是要走的路.

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { myState: 1 };
    }
    render() { ... }
}

或者根据您可以访问的ES2015的哪个阶段,您可以使用ES7属性初始值设定项

class MyComponent extends React.Component {
    state = { myState: 1};
    render() {}
}