如何与axios反应映射新帖子？

[大家好，我正在制作一个用于创建事件的网站，并将后端节点代码连接到前端反应代码。错误提示TypeError：this.state.events.map不是函数Events.render

  189 | />
  190 | 
  191 | {/* body of the page */}
> 192 | <div className="card-deck" style={{ marginTop: 60 }}>
      | ^  193 |   {this.state.events.map(event => (
  194 |     <div className="col-4">
  195 |       <div

这是发生错误的地方。

          {this.state.events.map(event => (
            <div className="col-4">
              <div
                class="card mb-5 shadow"
                style={{
                  borderRadius: 20,
                  maxWidth: 300,
                  minWidth: 250,
                  minHeight: 450,
                  maxHeight: 450
                }}
              ><div className="card-deck" style={{ marginTop: 60 }}>
          {this.state.events.map(event => (
            <div className="col-4">
              <div
                class="card mb-5 shadow"
                style={{
                  borderRadius: 20,
                  maxWidth: 300,
                  minWidth: 250,
                  minHeight: 450,
                  maxHeight: 450
                }}
              >

这是componentDidMount函数

        const { data } = await getCategories();
        const categories = [{ _id: "", name: "All Categories" }, ...data];

        const { data: events } = await getEvents();
        this.setState({ events, categories });

        console.log(events);
      }

此eventService文件从后端获取事件

const apiEndPoint = 'http://localhost:3100/api/events';

export function getEvents(){
    return http.get(apiEndPoint);
}

export function deleteEvent(eventId){
    return http.delete(apiEndPoint + '/' + eventId)
}

这是状态

    events: getEvents(),
    user: getUser(),
    users: getUsers(),
    showDetails: false,
    shownEventID: 0,
    showUserProfile: false,
    shownUserID: 0,
    searchQuery: ""
  };```

在调用componentDidMount之前，React调用render()方法，并且在这种情况下，您的this.state.events不是数组，使.map不是函数。

解决此问题：

在构造函数中，将events设置为空数组

{
   events: []
   //Rest of the state...
}

然后组件首次渲染时（在调用componentDidMount之前），this.state.events将是一个空数组，这意味着.map()将是一个函数，并且不会引发该错误。在调用componentDidMount之后，进行API调用并填充您的状态，这将导致重新渲染，并且应填充您的UI。

额外注意：您不应该在构造函数中进行API调用，这就是componentDidMount的目的。

如何与axios反应映射新帖子？

[大家好，我正在制作一个用于创建事件的网站，并将后端节点代码连接到前端反应代码。错误提示TypeError：this.state.events.map不是函数Events.render

  189 | />
  190 | 
  191 | {/* body of the page */}
> 192 | <div className="card-deck" style={{ marginTop: 60 }}>
      | ^  193 |   {this.state.events.map(event => (
  194 |     <div className="col-4">
  195 |       <div

这是发生错误的地方。

          {this.state.events.map(event => (
            <div className="col-4">
              <div
                class="card mb-5 shadow"
                style={{
                  borderRadius: 20,
                  maxWidth: 300,
                  minWidth: 250,
                  minHeight: 450,
                  maxHeight: 450
                }}
              ><div className="card-deck" style={{ marginTop: 60 }}>
          {this.state.events.map(event => (
            <div className="col-4">
              <div
                class="card mb-5 shadow"
                style={{
                  borderRadius: 20,
                  maxWidth: 300,
                  minWidth: 250,
                  minHeight: 450,
                  maxHeight: 450
                }}
              >

这是componentDidMount函数

        const { data } = await getCategories();
        const categories = [{ _id: "", name: "All Categories" }, ...data];

        const { data: events } = await getEvents();
        this.setState({ events, categories });

        console.log(events);
      }

此eventService文件从后端获取事件

const apiEndPoint = 'http://localhost:3100/api/events';

export function getEvents(){
    return http.get(apiEndPoint);
}

export function deleteEvent(eventId){
    return http.delete(apiEndPoint + '/' + eventId)
}

这是状态

    events: getEvents(),
    user: getUser(),
    users: getUsers(),
    showDetails: false,
    shownEventID: 0,
    showUserProfile: false,
    shownUserID: 0,
    searchQuery: ""
  };```

在调用componentDidMount之前，React调用render()方法，并且在这种情况下，您的this.state.events不是数组，使.map不是函数。

解决此问题：

在构造函数中，将events设置为空数组

{
   events: []
   //Rest of the state...
}

然后组件首次渲染时（在调用componentDidMount之前），this.state.events将是一个空数组，这意味着.map()将是一个函数，并且不会引发该错误。在调用componentDidMount之后，进行API调用并填充您的状态，这将导致重新渲染，并且应填充您的UI。

额外注意：您不应该在构造函数中进行API调用，这就是componentDidMount的目的。