Javascript 我的chartJS axios.get被触发两次，导致chart也渲染两次，而我没有'；我不知道为什么。I'；我使用react-chartjs-2

我遇到了一个问题，我的api调用被触发了两次而不是一次，因此它还呈现了两个图表。为什么?

export default class Graph extends Component {
  constructor(props) {
    super(props);
this.state: {
humidity_data
}

axios_humidity_data = () => {
    return new Promise((resolve, reject) => {
      try {
        axios
          .get(
            `url'`
          )
          .then(response => {
            const data = response.data.results[0].series[0].values;
            let date = [];
            let humidity = [];
            data.forEach(chart_item => {
              date.push(chart_item[0]);
              humidity.push(chart_item[1]);
            });
            this.setState({
              humidity_data: {
                labels: date,
                datasets: [
                  {
                    label: "Humidity %",
                    data: humidity,
                  }
                ]
              }
            });
            console.log(data);
            resolve(data);
          });
      } catch (err) {
        reject(err);
      }
    });
  };

  componentDidMount() {
    this.axios_humidity_data();
  }

  render() {
    return (
      <div>
        <Line
          data={this.state.pressure_data}
          options={{
            title: {
              display: true,
              text: "Pressure kPa",
            },
          }}
        />
      </div>
    );
  }
}

导出默认类图扩展组件{
建造师（道具）{
超级（道具）；
该州：{
湿度数据
}
axios_湿度_数据=（）=>{
返回新承诺（（解决、拒绝）=>{
试一试{
axios
.得到(
`url'`
)
。然后（响应=>{
const data=response.data.results[0]。系列[0]。值；
让日期=[]；
让湿度=[]；
data.forEach（图表项=>{
推送日期（图表项[0]）；
湿度推送（图表_项[1]）；
});
这是我的国家({
湿度数据：{
标签：日期，
数据集：[
{
标签：“湿度%”，
数据：湿度，
}
]
}
});
控制台日志（数据）；
解析（数据）；
});
}捕捉（错误）{
拒绝（错误）；
}
});
};
componentDidMount（）{
此.axios_湿度_数据（）；
}
render（）{
返回(
);
}
}

我希望只触发一个调用并呈现一个图表，但实际上它触发两次并呈现两个图表。

使用这种方法：

export default class Graph extends Component {
    constructor(props) {
        super(props);
        this.state: {
            humidity_data
        }
          var s = true;
        if (s) {
            axios_humidity_data = () => {
                return new Promise((resolve, reject) => {
                    try {
                        axios
                            .get(
                                `url'`
                            )
                            .then(response => {
                                const data = response.data.results[0].series[0].values;
                                let date = [];
                                let humidity = [];
                                data.forEach(chart_item => {
                                    date.push(chart_item[0]);
                                    humidity.push(chart_item[1]);
                                });
                                this.setState({
                                    humidity_data: {
                                        labels: date,
                                        datasets: [
                                            {
                                                label: "Humidity %",
                                                data: humidity,
                                            }
                                        ]
                                    }
                                });
                                console.log(data);
                                resolve(data);
                            });
                    } catch (err) {
                        reject(err);
                    }
                });
            };
        }
        s = false;
        componentDidMount() {
            this.axios_humidity_data();
        }

        render() {
            return (
                <div>
                <Line
            data={this.state.pressure_data}
            options={{
                title: {
                    display: true,
                        text: "Pressure kPa",
                },
            }}
            />
            </div>
        );
        }
    }

导出默认类图扩展组件{
建造师（道具）{
超级（道具）；
该州：{
湿度数据
}
var s=真；
若有(s){
axios_湿度_数据=（）=>{
返回新承诺（（解决、拒绝）=>{
试一试{
axios
.得到(
`url'`
)
。然后（响应=>{
const data=response.data.results[0]。系列[0]。值；
让日期=[]；
让湿度=[]；
data.forEach（图表项=>{
推送日期（图表项[0]）；
湿度推送（图表_项[1]）；
});
这是我的国家({
湿度数据：{
标签：日期，
数据集：[
{
标签：“湿度%”，
数据：湿度，
}
]
}
});
控制台日志（数据）；
解析（数据）；
});
}捕捉（错误）{
拒绝（错误）；
}
});
};
}
s=假；
componentDidMount（）{
此.axios_湿度_数据（）；
}
render（）{
返回(
);
}
}

这看起来是一个优雅的解决方案，我希望它能起作用。你能告诉我们发生了什么吗？没有错误，但什么也没有发生。我按照你的例子，我将在下面发布我的语法，这样你就可以检查它了@sajadHaibati解决了它，条件渲染是解决方案