Question

这是我的整个代码。

import React, { Component } from 'react';
import './App.css';

var Chart = require('./Chart');

class App extends React.Component {
  componentDidMount() {

    this.setState({      
      data1: [
        {id: '5fbmzmtc', x: 7, y: 41, z: 6},
        {id: 's4f8phwm', x: 11, y: 45, z: 9}
      ],
      domain: {x: [0, 30], y: [0, 100]}
    });
  }

  render() {
    return (        
      <div>
        <div className="bottom-right-svg">
          <Chart data={this.state.data1} domain={this.state.domain} />
        </div>
      </div>      
    );
  }
}

export default App;

正如你所看到的，我在componentDidMount（）中设置了状态，但是this.state是null错误。

TypeError：this.state在render（）函数中为null 。

我该如何解决这个问题？

Answer 1

您需要在this.state

中初始化constructor

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

Answer 2

在setState生命周期钩子中使用componentDidMount函数是不明智的。只需在构造函数中初始化它，或者如果您使用的是现代ES，请尝试以下方法：

编辑：请注意，如果您在setState挂钩内使用componentDidMount，可能每个点击都会向您发出警告。但是，它不是反模式，但会导致意外行为。

来自 React 文档： ＆＃34;在此方法中调用setState()将触发额外呈现（...）谨慎使用此模式，因为它经常导致性能问题＆＃34; 。您可以使用它，但问题是您的组件是否可以支付一个额外的额外渲染？

更多阅读：https://hashnode.com/post/why-is-it-a-bad-idea-to-call-setstate-immediately-after-componentdidmount-in-react-cim5vz8kn01flek53aqa22mby

class App extends React.Component {
   state = {      
     data1: [
       {id: '5fbmzmtc', x: 7, y: 41, z: 6},
       {id: 's4f8phwm', x: 11, y: 45, z: 9},
     ],
       domain: {x: [0, 30], y: [0, 100]},
   };

   render() {
     return (        
       <div>
         <div className="bottom-right-svg">
           <Chart data={this.state.data1} domain={this.state.domain} />
         </div>
       </div>      
     );
   }
}

export default App;

Answer 3

是否有理由在componentDidMount中设置状态？

您的组件在转到componentDidMount之前已经呈现过一次，这就是您遇到此问题的原因。

您应该在构造函数中初始化状态。

import React, { Component } from 'react';
import './App.css';

var Chart = require('./Chart');

class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {      
        data1: [
          {id: '5fbmzmtc', x: 7, y: 41, z: 6},
          {id: 's4f8phwm', x: 11, y: 45, z: 9}
        ],
        domain: {x: [0, 30], y: [0, 100]}
      };
    }

  render() {
    return (        
      <div>
        <div className="bottom-right-svg">
          <Chart data={this.state.data1} domain={this.state.domain} />
        </div>
      </div>      
    );
  }
}

export default App;

在componentdidmount中React 16 setstate但抛出null错误

3 个答案: