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

Question

我如何使用来自 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>
)

Answer 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（这看起来很奇怪，但事实就是如此）。

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

react axios how to populate React Big Calendar

reactjs

axios

react-big-calendar