Reactjs 在显示react apexchart之前显示加载程序

我希望在显示图表之前显示加载程序。我已实现以下代码，但它不起作用。单击“比较”按钮后，加载程序应立即显示：

import React, { Component, Fragment,useState,useRef,createRef} from "react";
import Loader from "react-loader-spinner";
import RestAPI from "services/api";
import axios from "axios";
import Select from 'react-select';

import "d3-transition";

import {
    Button,
    Label,
    FormGroup,
    Form,
   
  } from "reactstrap";

import ReactApexChart from "react-apexcharts";


import "tippy.js/dist/tippy.css";
import "tippy.js/animations/scale.css";
class StackedAreaChart extends Component {
    constructor(props) {
      super(props);
      this.selectInputRef = React.createRef();
      this.selectInputRef1 = React.createRef();
      this.selectValue=this.selectValue.bind(this)
      this.clickEvent=this.clickEvent.bind(this)
      this.handleChange=this.handleChange.bind(this)
      this.onClear=this.onClear.bind(this)
      this.checkIfMounted=this.checkIfMounted.bind(this)
      this.state = {
        soptions:[],
        weights:[],
        years:[],
        loader:false,
        selectOptions: [],
        selectedValues:[],
        combinedList:[],
        yearsList:[],
        isLoaded:false,
        selectValue:"",
        series: []
      };
    }
    checkIfMounted() {
      console.log("mount")
      return this.selectInputRef1.current != null;
   }
 
    componentDidMount(){

    fetch("http://127.0.0.1:8000/api/getallvals/")
    .then(response =>  response.json())
    .then(json => {
        
        this.setState({
          
          soptions:json.topics,
          
               
        
          
        })            
    });
     
    }
    handleChange=(e)=>{
      const value = Array.isArray(e) ? e.map(s => s.value) : []
      this.state.selectedValues=value
      console.log("value is:",this.state.selectedValues)
    }
    selectValue(e){
        var selectValue=this.state.selectValue;
        var isDisplayed=this.state.isDisplayed;
        console.log("the val is:",e);
        console.log("the val is:",e.length);
        console.log("the val is:",e[0].value);
        this.setState({
          selectedValues:e,
          loader:false
        });
        

       
        console.log(this.state.selectedValues)
        
    }
    onClear() {
      //window.location.reload(false);
      //console.log(this.selectInputRef1.current)
      this.selectInputRef.current.select.clearValue();
    }
      //this.selectInputRef1.current.chart.destroy();}
  clickEvent(){
    
    console.log("in click event",this.state.selectedValues)
    var selectedValues=this.state.selectedValues;
    var {series}=this.state;
      fetch("http://127.0.0.1:8000/api/getallvals/"+'?'+selectedValues.join('&'))
        .then(response =>  response.json())
        .then(json => {
          
         
            series=[]
            for(let i=0;i<json.weights.length;i++){
              series=series.concat([{name:selectedValues[i],data:json.weights[i]}])
              //selectInputRef1.current.chart.publicMethods.updateOptions({})
            }
            this.setState({

              
            series: series,
            datalabels:{
                enabled:true
            },
            
            options:{
              stroke:{
                  curve:'smooth'
                },
                
          xaxis:{
              categories:json.years
          },
         
      },
          

              isLoaded:true,
              loader:false
            
              
                   
            
              
            })            
        });
     
      console.log("this state",series)
      
    }

  

    render() {
      const checkmount=this.checkIfMounted;
     
        var {options,isLoaded,loader,series,yeardata,soptions,weights,years}=this.state;
    if(isLoaded){
      return (
        
       
  <div id="chart" className="box" >
    <Form role="form" method="POST" >
                        
                        
                        <FormGroup>
                        <h2>Evolution of a value over Time
                        </h2>
                        <Label>Select a value</Label>
                        <Select ref={this.selectInputRef} name="selectOptions" isClearable isMulti placeholder="Select Option" options={soptions} 
                         
                         onChange={this.handleChange}/>
                                                    
                            
                            <br></br>
                        <Button onClick={ this.clickEvent }
                        >Compare</Button>
                        <Button onClick={this.onClear}>Reset</Button>
                       
                        <Loader type="puff" visible={loader} color="#00BFFF" height={100} width={100}></Loader>
                        </FormGroup>
              </Form>
   
      {checkmount?(
    <ReactApexChart ref={this.selectInputRef1} options={this.state.options} series={this.state.series} type="area" height={350} />):
    (<div>not yet loaded</div>)}
</div>)
    }
    else{
        return (
        
       
            <div id="chart">
              <Form role="form" method="POST" >
                                  
                                  
                                  <FormGroup>
                                  <h2>Evolution of a values over time
                        </h2>
                                  <Label>Select a value</Label>
                                  
                                                              
                                      <br></br>
                                      <Select ref={this.selectInputRef} name="selectOptions" isClearable isMulti placeholder="Select Option" options={soptions} 
                         
                         onChange={this.handleChange}/>
                                                    
                            
                            <br></br>
                        <Button onClick={this.clickEvent}>Compare</Button>
                        <Button onClick={this.onClear}>Reset</Button>   
                        <Loader type="puff" visible={false} color="#00BFFF" height={100} width={100}></Loader>


                                  </FormGroup>
                        </Form>
                        </div>) 
    }
    }
}
export default StackedAreaChart;

import React，{Component，Fragment，useState，useRef，createRef}来自“React”；
从“react Loader spinner”导入装载机；
从“服务/api”导入RestAPI；
从“axios”导入axios；
从“反应选择”导入选择；
导入“d3转换”；
进口{
按钮
标签，
FormGroup，
形式，
}从“反应带”；
从“react-apexcharts”导入react-ApexChart；
导入“tippy.js/dist/tippy.css”；
导入“tippy.js/animations/scale.css”；
类StackedAreaChart扩展组件{
建造师（道具）{
超级（道具）；
this.selectInputRef=React.createRef（）；
this.selectInputRef1=React.createRef（）；
this.selectValue=this.selectValue.bind（this）
this.clickEvent=this.clickEvent.bind（this）
this.handleChange=this.handleChange.bind（this）
this.onClear=this.onClear.bind（this）
this.checkIfMounted=this.checkIfMounted.bind（this）
此.state={
意见：[]，
权重：[]，
年份：[]，
加载器：错，
选择选项：[]，
所选值：[]，
组合列表：[]，
年份列表：[]，
isLoaded:false，
选择值：“”，
系列：[]
};
}
checkIfMounted（）{
控制台日志（“装载”）
返回this.selectInputRef1.current！=null；
}
componentDidMount（）{
取回（“http://127.0.0.1:8000/api/getallvals/")
.then（response=>response.json（））
。然后（json=>{
这是我的国家({
soptions:json.topics，
})            
});
}
handleChange=（e）=>{
常量值=数组.isArray（e）？e.map（s=>s.value）：[]
this.state.selectedValues=value
console.log（“值为：”，this.state.selectedValues）
}
选择值（e）{
var selectValue=this.state.selectValue；
var isDisplayed=this.state.isDisplayed；
log（“val为：”，e）；
log（“val为：”，e.length）；
log（“val为：”，e[0].value）；
这是我的国家({
选择值：e，
加载器：错误
});
console.log（this.state.selectedValues）
}
onClear（）{
//window.location.reload（false）；
//console.log（this.selectInputRef1.current）
this.selectInputRef.current.select.clearValue（）；
}
//this.selectInputRef1.current.chart.destroy（）；}
clickEvent（）{
console.log（“在单击事件中”，this.state.selectedValues）
var selectedValues=this.state.selectedValues；
var{series}=this.state；
取回（“http://127.0.0.1:8000/api/getallvals/“+”？“+selectedValues.join（“&”））
.then（response=>response.json（））
。然后（json=>{
系列=[]
对于（设i=0；i），您要做的是，当您获取数据时，加载程序将为true。一旦您获取数据，加载程序将为false

所以，在clickEvent中，您可以更改

fetch("http://127.0.0.1:8000/api/getallvals/"+'?'+selectedValues.join('&'))
        .then(response =>  response.json())
        .then(json => {

为此：

this.setState({loader: true})
fetch("http://127.0.0.1:8000/api/getallvals/"+'?'+selectedValues.join('&'))
 .then(response =>  {
     this.setState({loader: false})
     response.json()
  })
 .then(json => {
...

是的，@Sinannice刚刚解决了这个问题，如果这是一种方法，请确保接受它，这样其他人也能从中受益。快乐编码