反应 axios 如何填充反应大日历答案

【问题标题】：react axios how to populate React Big Calendar反应 axios 如何填充反应大日历
【发布时间】：2020-01-11 22:30:11
【问题描述】：

我如何使用来自 API Axios 的数据填充大日历，创建数组 ..................................................... ....................................

class Calendar extends Component {
  constructor() {
    super();

    this.state = {
      events: [],
      info: false,
      title: null,
      startDate: null,
      endDay: null,
      startTime: null,
      endTime: null,
      description: null
    };
    this.toggle = this.toggle.bind(this);
    this.toggleInfo = this.toggleInfo.bind(this);
  }
  handleChange = e => {

    this.setState({ [e.target.name]: e.target.value });

};

使用 Axios 从 API 获取请求............

  loadCalendar() {
    axios
      .get(api + "api/calendar", {
        headers: {
          "Content-type": "application/json",
          Authorization: reqtoken
        }
      })

      .then(json => {
        json.data.data.data.map(data =>
          this.setState(
            events({
              title: data.title,
              start: data.startDate,
              end: data.endDate
            })
          )
        );

      })
      .catch(erros => {
        console.log(erros);
      });
  }

  componentDidMount() {
    this.loadCalendar();
  }

reder retorn html with data api.......................... ....................

render() {
    return (
 <CardBody style={{ height: "40rem" }}>
            <BigCalendar
              className="d-sm-down-none"
              style={{ height: "-webkit-fill-available" }}
              {...this.props}
              events={events}
              views={["month", "week", "day"]}
              step={30}
              defaultDate={new Date(currYear, currMonth, 1)}
              defaultView="month"
              toolbar={true}
              localizer={localizer}
            />
            <BigCalendar
              className="d-md-none"
              {...this.props}
              events={events}
              views={["day"]}
              step={30}
              defaultDate={new Date(currYear, currMonth, 1)}
              defaultView="day"
              toolbar={true}
              localizer={localizer}
            />
          </CardBody>
)

【问题讨论】：

标签： reactjs axios react-big-calendar

【解决方案1】：

当您设置事件时，您将覆盖以前的事件。您也错误地使用了 setState，您应该将一个对象传递给该函数。

相反，您可以为 axios 成功回调执行以下操作：

.then(json => {
  const events = json.data.data.data.map(data =>
    return {
      title: data.title,
      start: data.startDate,
      end: data.endDate
    }
  );
  this.setState({ events });
})

这假设您的事件数据实际上是在嵌套对象 json.data.data.data 中返回的（这看起来很奇怪，但事实就是如此）。

【讨论】：