Reactjs 保存处于状态的对象数组并将其传递给返回以在react中的网页上显示它

我正在处理一个react页面，通过Api调用从数据库获取数据。我正在尝试将获取的数据保存到状态，然后尝试将其传递给返回，以便在网页上显示它。我已经取得了数据，并保存在声明中，但我不知道如何显示在网页上

下面是我的代码：

 class DateTimePicker extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
  constructor(props) {
    super()
    this.state = {
      date: new Date(),
      dateTime: moment(),
      otherTime: moment().tz(props.otherTimezone),
      disabled: true,
      apidata:null
    }
    this.timeChange = this.timeChange.bind(this)
    this.dateChanged = this.dateChanged.bind(this)
    this.otherTimeChange = this.otherTimeChange.bind(this)
  }
  combineDate(date, time){
    const combinedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), time.getHours(), time.getMinutes())
    return combinedDate;
  }
  dateChanged(date){
    const dateTime = this.state.dateTime.toDate()
    const combineDate = this.combineDate(date, dateTime)
    if(combineDate < new Date()){
      this.setState({
        dateTime: moment(),
        otherTime: moment().tz(this.props.otherTimezone),
      })
    }
    this.setState({date}, this.props.dateChanged(date));
  }

  timeChange(data){
    let diff = data.unix() - this.state.dateTime.unix()
    let otherNewUnix = this.state.otherTime.unix() + diff
    const date = this.state.date
    if(this.combineDate(date, data.toDate()) < new Date()) return;
    this.setState({
      dateTime: data,
      otherTime: moment.unix(otherNewUnix).tz(this.props.otherTimezone),
      disabled:false
    }, this.props.timeChange(data.toDate(), moment.unix(otherNewUnix).tz(this.props.otherTimezone).toDate()))
  }
  otherTimeChange(data){
    let diff = data.unix() - this.state.otherTime.unix()
    let ourUnix = this.state.dateTime.unix() + diff
    const date = this.state.date
    const dateTime = moment.unix(ourUnix)
    if(this.combineDate(date, dateTime.toDate()) < new Date()) return
    this.setState({
      dateTime: dateTime,
      otherTime: data,
      disabled:false
    }, this.props.timeChange(data.toDate(), moment.unix(ourUnix).tz(this.props.otherTimezone).toDate()))
  }

  main = async () =>{                                  **//this the function to fetch data**
    try{

       let classroom_id = localStorage.getItem('classroom_id'); 
       let data = {
               data: {
                       classroom_id:classroom_id,
                       sort_by: [],
                       filter_by: []
                    },
                classroom_id: classroom_id,
                first_time: true
          }
      let students = await axios.post(`${server}/user/appointfetch/`+classroom_id,
                                data,
                                {
                                   headers: {
                                     'Authorization': 'token '+localStorage.getItem('token')
                                   }
                                }
                         );


       console.log(students.data);

       let response = students.data;
       let appointments = [];
       for(let i=0;i<response.length;i++){
          let currNewFormatObj = {
                      summary:response[i].schedule_call.summary,
                      start:response[i].schedule_call.start, 
                      end:response[i].schedule_call.end
          }
          appointments[i] = currNewFormatObj;
        }

        this.setState({apidata:appointments});               **//here, saving it to state**
     }catch(e){
       console.log(e);
     }
  }


   async componentDidMount(){
       await this.main();
   }




  render() {
    return (
      <StyledDateTimePicker {...this.props} className={`${this.props.className || ""}`}>
        <div className="extends">
          <div className="calendar">
            {/* <div className="header">
            Pick a date
            </div> */}
            <div className="control">
              <StyledCalendar minDate={new Date()}
                onChange={(date)=>{this.dateChanged(date); this.props.dateChanged(date)}}
                value={new Date(this.state.date)}
                nextLabel={<Direction />}
                prevLabel={<Direction className="left"/>}
                next2Label={<span />}
                prev2Label={<span />}
              />
            </div>
          </div>
          <div className="calendar">
            <div className="header2">
            Select Time
            </div>
            <div className="control2">
            <StyledTimeSelector
              pref="selector1"
              timezoneKey="Your time"
              timezone={moment.tz(this.props.userTimezone).format('z')}
              zone={this.props.userTimezone}
              onChange={(value)=>{this.timeChange(value)}}
              dateTime={this.state.dateTime}
              />
            <StyledTimeSelector
              pref="selector2"
              timezoneKey="Student time"
              timezone={moment.tz(this.props.otherTimezone).format('z')}
              zone={this.props.otherTimezone}
              onChange={(value)=>{this.otherTimeChange(value)}}
              dateTime={this.state.otherTime}
              />
               </div>
              {
                (this.props.localSlotOccupiedCTA && this.props.slotOccupied) &&
                <StyledSecondaryButton loading={this.props.ctaLoading} text={this.props.localSlotOccupiedCTA}
                onClick={()=>{
                  this.props.localCTAClick(true)
                }}
                />
              }

              {
                (this.props.localCTA && !this.props.slotOccupied) &&
                <MyStyledAlternateButton text={this.props.localCTA} 
                onClick={()=>{
                  if(!this.props.localCTAdisabled)
                    this.props.localCTAClick()
                }}
                disabled={this.props.localCTAdisabled} 
                loading={this.props.ctaLoading}/>
              }

          </div>
        </div>

        <Time>
          {/* <div className="header">
            Pick a time
          </div> */}
          <div className="control">
          <div>
                ****//Here i want to show the data****
            </div>
          </div>
        </Time>
      </StyledDateTimePicker>

    );
  }
}

Ex-我想以以下格式显示数据：

---

开始-结束摘要

我能理解的是，您已将数据存储在状态中，现在只需渲染它

render(){
    const { showdata } = this.state;  // state where you have stored the data
    let showdataList =
      showdata.length > 0 &&
      showdata.map((item, i) => {
      const {  schedule_call:{start, end,summary }} = item
        return (
            <h2>{start}</h2>
            <h2>{end}</h2>
            <h2>{summary}</h2>
        );
      });

      //some code
      {showdataList}   //Use this wherever you whant to render
      // some code
}

render（）{
const{showdata}=this.state；//存储数据的状态
让showdataList=
showdata.length>0&&
showdata.map（（项目，i）=>{
const{schedule_call:{start，end，summary}}=item
返回(
{start}
{end}
{摘要}
);
});
//一些代码
{showdataList}//在需要渲染的地方使用此选项
//一些代码
}

谢谢@Mojo。但是当我按照上面的解释编写代码时，它开始抛出错误。未捕获的TypeError:无法读取DateTimePicker.render的undefined属性“length”。这是因为使用componentDidMount（）函数调用Api函数吗？感谢@Mojo的帮助。但是由于上述错误，我的组件没有加载。@Ankit您可以在JSFIDLE上共享最近更新的代码吗

render(){
    const { showdata } = this.state;  // state where you have stored the data
    let showdataList =
      showdata.length > 0 &&
      showdata.map((item, i) => {
      const {  schedule_call:{start, end,summary }} = item
        return (
            <h2>{start}</h2>
            <h2>{end}</h2>
            <h2>{summary}</h2>
        );
      });

      //some code
      {showdataList}   //Use this wherever you whant to render
      // some code
}