在reactjs中设置状态时出现问题

我有一个非常简单的代码来设置一个状态变量，但有麻烦

我看到this.state.chart_选项显示在控制台上，但为空

代码：\u

import React from "react";
import { render } from "react-dom";
// Import Highcharts
import Highcharts from "highcharts/highstock";
import drilldow from "highcharts/modules/drilldown";
//import HighchartsReact from "./HighchartsReact.js";
import PieChart from "highcharts-react-official";
drilldow(Highcharts);
const options = {
  chart: {
    type: "pie"
  },
  series: [
    {
      data: [{ y: 100, name: "Female" }, { y: 50, name: "Male" }]
    }
  ]
};
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      chart_options: null
    };
    this.setState({ chart_options: options }, () => {
      console.log("this.state - ", this.state);
      console.log("options - ", options);
    });
  }
  onFilterClickHandler = () => {
    console.log("hi", this.state.chart_options);
  };
  render() {
    const key = 1;
    return (
      <div>
        <div>
          <label>
            <input
              type="checkbox"
              value={key}
              onClick={this.onFilterClickHandler}
            />
          </label>
        </div>
        <h2>Highcharts</h2>
        <PieChart highcharts={Highcharts} options={options} />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

从“React”导入React；
从“react dom”导入{render}；
//导入海图
从“Highcharts/highstock”导入Highcharts；
从“highcharts/modules/drilldown”导入drilldow；
//从“/HighchartsReact.js”导入HighchartsReact；
从“highcharts react official”导入PieChart；
钻井道（海图）；
常量选项={
图表：{
类型：“馅饼”
},
系列：[
{
数据：[{y:100，姓名：“女性”}，{y:50，姓名：“男性”}]
}
]
};
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
图表选项：空
};
this.setState（{chart_options:options}，（）=>{
log（“this.state-”，this.state）；
log（“选项-”，选项）；
});
}
onFilterClickHandler=（）=>{
log（“hi”，this.state.chart\u选项）；
};
render（）{
常数键=1；
返回(
海图
);
}
}
render（，document.getElementById（“根”））；

您正在构造函数内部调用

setState

（当组件尚未装入时）

要获取预期的

console.log

输出，请从lifecycle方法调用

setState

：

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
图表选项：空
};
}
componentDidMount（）{
this.setState（{chart_options:options}，（）=>{
log（“this.state-”，this.state）；
log（“选项-”，选项）；
});
console.log（this.state）；
}
onFilterClickHandler=（）=>{
log（“hi”，this.state.chart\u选项）；
};
render（）{
常数键=1；
返回(
海图
);
}
}

检查答案，你就会知道哪里出了问题。为什么在构造函数（）中使用setState？这是坏习惯！如果要为初始this.state.chart_选项设置值“options”，则应在声明this.state.chart_options=options时设置其方向。

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      chart_options: null
    };
  }

  componentDidMount() {
    this.setState({ chart_options: options }, () => {
      console.log("this.state - ", this.state);
      console.log("options - ", options);
    });
    console.log(this.state);
  }

  onFilterClickHandler = () => {
    console.log("hi", this.state.chart_options);
  };
  render() {
    const key = 1;
    return (
      <div>
        <div>
          <label>
            <input
              type="checkbox"
              value={key}
              onClick={this.onFilterClickHandler}
            />
          </label>
        </div>
        <h2>Highcharts</h2>
        <PieChart highcharts={Highcharts} options={options} />
      </div>
    );
  }
}