时间戳

首页 > 解决方案 > 将事件从 api 添加到 React 日历

javascript - 将事件从 api 添加到 React 日历

问题描述

我是反应的初学者。我在将 api 响应传递给反应日历时遇到了问题。日历在另一个组件中。

这是我在主班的初始状态

  state = {
    calendarEvents: {
      title: "All Day Event very long title",
      start: "2021-05-03T22:00:00.000Z",
      end: "2021-05-05T22:00:00.000Z",
    },
  };

现在我想将收到的 api 响应传递给 CalendarEvents 状态。响应如下所示：

[
    {
        "_id": "60a40304b70c7815d077632b",
        "title": "TEy",
        "start": "2021-04-29T22:00:00.000Z",
        "end": "2021-05-05T22:00:00.000Z",
        "__v": 0
    },
    {
        "_id": "60a4034db70c7815d077632c",
        "title": "TEyy",
        "start": "2021-05-04T22:00:00.000Z",
        "end": "2021-05-19T22:00:00.000Z",
        "__v": 0
    },
    {
        "_id": "60a40743b70c7815d077632d",
        "title": "TEyyy",
        "start": "2021-04-28T22:00:00.000Z",
        "end": "2021-05-27T22:00:00.000Z",
        "__v": 0
    },
]

我的函数将数据保存到另一个数组并替换状态中的 calendarEvents。

(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {_id: "60a40304b70c7815d077632b", title: "TEy", start: "2021-04-29T22:00:00.000Z", end: "2021-05-05T22:00:00.000Z", __v: 0}
1: {_id: "60a4034db70c7815d077632c", title: "TEyy", start: "2021-05-04T22:00:00.000Z", end: "2021-05-19T22:00:00.000Z", __v: 0}
2: {_id: "60a40743b70c7815d077632d", title: "TEyyy", start: "2021-04-28T22:00:00.000Z", end: "2021-05-27T22:00:00.000Z", __v: 0}
3: {_id: "60a429fd56f28356fc0c08f1", title: "TEqy", start: "2021-05-04T22:00:00.000Z", end: "2021-05-04T22:00:00.000Z", __v: 0}
4: {_id: "60a42a4c56f28356fc0c08f2", title: "TEqqy", start: "2021-04-27T22:00:00.000Z", end: "2021-05-04T22:00:00.000Z", __v: 0}
5: {_id: "60a42b0556f28356fc0c08f3", title: "TEqqqy", start: "2021-04-26T22:00:00.000Z", end: "2021-05-03T22:00:00.000Z", __v: 0}
6: {_id: "60a42d5356f28356fc0c08f6", title: "TEqqqqy", start: "2021-04-26T22:00:00.000Z", end: "2021-05-11T22:00:00.000Z", __v: 0}
7: {_id: "60a42dfbf2769366c46def4d", title: "TEqqqqqy", start: "2021-04-27T22:00:00.000Z", end: "2021-05-11T22:00:00.000Z", __v: 0}
8: {_id: "60a43129f2769366c46def4f", title: "undefined", start: "2021-05-04T22:00:00.000Z", end: "2021-05-11T22:00:00.000Z", __v: 0}
9: {_id: "60a4318ff2769366c46def50", title: "v2", start: "2021-05-03T22:00:00.000Z", end: "2021-05-11T22:00:00.000Z", __v: 0}
length: 10
__proto__: Array(0)

现在我想通过道具 Main 将它传递给日历 <Calendar eventsPassed={this.state.calendarEvents}/>

日历：

  render() {
    return (
      <div style={{ height: "400pt" }}>
        <Calendar
          **events={this.props.eventsPassed}**
...

这会产生很多错误：

index.js:1 警告：道具类型失败：提供给events的道具类型无效，需要一个数组。objectCalendar

index.js:1 警告：道具类型失败：提供给events的道具类型无效，应为。objectMonthViewarray

未捕获的类型错误：evts.filter 不是函数

警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。修复，取消 componentWillUnmount 方法中的所有订阅和异步任务

但这有效（日历类）

事件 = [ {

  title: "All Day Event very long title",
  start: "2021-05-03T22:00:00.000Z",
  end: "2021-05-05T22:00:00.000Z",
},


  render() {
    return (
      <div style={{ height: "400pt" }}>
        <Calendar
          **events={this.events}**
...

因此，即使我尝试仅传递开头提到的状态（没有 api 响应），它也会出错。我很困惑。提前感谢您的帮助！

标签： javascriptreactjsapi

解决方案

看起来您的初始状态不是数组类型

state = {
calendarEvents: {
  title: "All Day Event very long title",
  start: "2021-05-03T22:00:00.000Z",
  end: "2021-05-05T22:00:00.000Z",
},

};

尝试将 calandarEvents 包装在一个数组中：

 state = {
    calendarEvents: [{
      title: "All Day Event very long title",
      start: "2021-05-03T22:00:00.000Z",
      end: "2021-05-05T22:00:00.000Z",
    },
  }];

对于您需要的警告，请使用componentwillunmount清理您的组件并阻止此后期组件代码，以便我可以帮助您

推荐阅读