State is null in React | 易学教程

问题

I receive this error:

TypeError: this.state is null

Have code like this, but it does not work .... Any idea why?

I want to change the text of a label (reanalyzeButton)

Read several docs and tutorials and it seem it should work. No idea why it behaves like this.

This is inherited code I work with using React 0.13

var ProjectHeader = React.createClass({

    displayName: 'ProjectHeader',
    intervalId: null,
    state: {
    projectjson: [],
    label: '',
  },

    componentDidMount() {


        // Now we need to make it run at a specified interval
        this.intervalId = setInterval(this.refresh, 1000);
        this.setState({ label: '<span><i className="octicon octicon-sync" /> Project queued for analysis: <strong>{queuePosition}</strong>.</span>'});
      },

refresh : function(){

   if (this.state.projectjson.analysis_status == 'succeeded') {

      clearInterval(this.intervalId);
     this.setState({label: '<A onClick={this.analyzeProject} title="Request an analysis of the project"><i className="octicon octicon-sync"/> Check for new commits</A>'});
    }

render : function(){

  if (props.project.analysis_status == 'in_progress') {
            //reanalyzeButton = <A onClick={this.analyzeProject} title="Request a re-analysis of the project"><i className="fa fa-refresh fa-spin" /> Analysis in progress</A>
            reanalyzeButton = this.state.label
        } else if ((!props.project.analyze) || props.project.analysis_priority == 0) {
            //reanalyzeButton = <A onClick={this.analyzeProject} title="Request an analysis of the project"><i className="octicon octicon-sync"/> Check for new commits</A>
           reanalyzeButton = this.state.label
        } else {
            //reanalyzeButton = <span><i className="octicon octicon-sync" /> Project queued for analysis: <strong>{queuePosition}</strong>.</span>
            reanalyzeButton = this.state.label
        }

 return  <div className="project-header" itemScope itemType="http://schema.org/Code">
                    <div className="row">
                        <div className="col-xs-12 col-sm-9">
                            <div className="clearfix">
                                {projectHeader}
                            </div>
                        </div>
                        <div className="col-xs-12 col-sm-3">
                            <span className="qc-badge">
                            {badge}
                            </span>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-xs-12">
                            <ul className="meta">
                                {fetchStatus}{projectInfo} <li>{reanalyzeButton}</li>
                            </ul>
                            <ul className="tags hidden-xs">
                                {tagList}
                            </ul>
                        </div>
                    </div>

回答1:

You need to specify a getInitialState method in order to set the initial state. See here: https://reactjs.org/docs/react-without-es6.html#setting-the-initial-state

来源：https://stackoverflow.com/questions/61059383/state-is-null-in-react

标签

reactjs