当父组件将数据传递给子组件并渲染子组件时，显示加载栏。 React.JS

Question

我正在React.js的父组件上加载一个子组件。单击该按钮，数据将通过道具传递到子组件，子组件将通过该数据进行映射并呈现在屏幕上。我正在从本地存储中获取数据，并将其数据结构处理为子组件。 但是，问题是当我单击按钮并传递和渲染数据时，将显示该按钮，并在呈现子组件之后显示该按钮。当我单击按钮时，我需要加载微调器，它消失并显示实际组件。 我在状态下尝试了类似loading: false之类的方法，但无济于事。

感谢您的帮助

import ShowPatientAppointments from './ShowPatientAppointments.component';

class PatientAppointmnent extends Component {
    state = {
        doctorSlots: null,
        timingSlot: null,
        bookDay: null,
        bookTime: null,
        hasTiming: false,
    }

    getSlots = () => {
        let slot = [];
        let time = [];
        
        for (let i=0; i< localStorage.length; i++) {
            let key = localStorage.key(i);
            let value = JSON.parse(localStorage[key]);
            slot.push(key);
            time.push(value);
            
            this.setState({doctorSlots: slot, timingSlot: time});
        }
        console.log(this.state.doctorSlots, this.state.timingSlot);
    }


    render() {
        const { doctorSlots, timingSlot, hasTiming } = this.state;
        return(
            <div>
               
                <button onClick={this.getSlots} className='button'>Show me dates</button>

                {doctorSlots === null ? <p></p> : <PatientSelectDay props={doctorSlots} timing={timingSlot} getTimings={this.getTiming} />}
            </div>
        )
    }
}

export default PatientAppointmnent;


class PatientSelectDay extends Component {
state = {  
      options: [...this.props.props].map(obj => {
        return {value: `${obj}`, label: `${obj}`}
      }),
      timingOptions: [...this.props.timing],
      open_id: [],
      part_id: '',
      doctorDay: 'day',
      doctorTiming: 'timing',
  }

  changeSingleHandler = e => {
    this.setState({ part_id: e ? e.value : '' });
  };

  changeHandler = e => {
    let add = this.state.open_id;
    add.push(e.map(x => x.value));
    this.setState({ open_id: e ? add : [] });
  };

  saveState = (option) => {
...save selected options
  }  

  render() {
    const {options, timingOptions} = this.state;
    return (
      <div>
            <div className='carousel'>
          {options.map((option, index) => {
                const timing = timingOptions[index].map(obj => {
                  return {value: `${obj}`, label: `${obj}`}});
                return(
                <div key={index}>
                  <Select
                    name="open_id"
                    value={option}
                    onChange={this.changeSingleHandler}
                    options={option}
                    className='select'
                  /> 
                  <Select
                    name="open_id"
                    value={this.state.open_id}
                    onChange={this.changeHandler}
                    options={timing}
                    className='select'
                  /> 
            <button onClick={() => this.saveState(option)} className='button-left'>Select Days</button>
            </div>
            )
  })}
            </div>
          </div>
          )
    }
  }
export default PatientSelectDay;

Answer 1

您需要添加状态变量loading来更新代码。

class PatientAppointmnent extends Component {
    state = {
        doctorSlots: null,
        timingSlot: null,
        bookDay: null,
        bookTime: null,
        hasTiming: false,
        loading: false
    }

    getSlots = () => {
        let slot = [];
        let time = [];
        
        this.setState({
          loading: true
        })
        
        for (let i=0; i< localStorage.length; i++) {
            let key = localStorage.key(i);
            let value = JSON.parse(localStorage[key]);
            slot.push(key);
            time.push(value);
            
            this.setState({doctorSlots: slot, timingSlot: time, loading: false});
        }
        console.log(this.state.doctorSlots, this.state.timingSlot);
    }
    
    renderButton = () => {
            const { doctorSlots, timingSlot, loading } = this.state;
        if(doctorSlots === null && timingSlot === null) {
        return <div>
          {loading ? <p>Loading...</p> : <button onClick={this.getSlots} className='button'>Show me dates</button>}
        </div>
      }
      return null;
    }


    render() {
        const { doctorSlots, timingSlot, hasTiming, loading } = this.state;
        return(
            <div>
                {this.renderButton()}
                {doctorSlots === null ? <p></p> : <PatientSelectDay props={doctorSlots} timing={timingSlot} getTimings={this.getTiming} />}
            </div>
        )
    }
}

export default PatientAppointmnent;


class PatientSelectDay extends Component {
state = {  
      options: [...this.props.props].map(obj => {
        return {value: `${obj}`, label: `${obj}`}
      }),
      timingOptions: [...this.props.timing],
      open_id: [],
      part_id: '',
      doctorDay: 'day',
      doctorTiming: 'timing',
  }

  changeSingleHandler = e => {
    this.setState({ part_id: e ? e.value : '' });
  };

  changeHandler = e => {
    let add = this.state.open_id;
    add.push(e.map(x => x.value));
    this.setState({ open_id: e ? add : [] });
  };

  saveState = (option) => {
...save selected options
  }  

  render() {
    const {options, timingOptions} = this.state;
    return (
      <div>
            <div className='carousel'>
          {options.map((option, index) => {
                const timing = timingOptions[index].map(obj => {
                  return {value: `${obj}`, label: `${obj}`}});
                return(
                <div key={index}>
                  <Select
                    name="open_id"
                    value={option}
                    onChange={this.changeSingleHandler}
                    options={option}
                    className='select'
                  /> 
                  <Select
                    name="open_id"
                    value={this.state.open_id}
                    onChange={this.changeHandler}
                    options={timing}
                    className='select'
                  /> 
            <button onClick={() => this.saveState(option)} className='button-left'>Select Days</button>
            </div>
            )
  })}
            </div>
          </div>
          )
    }
  }
export default PatientSelectDay;