Question

大家好，我正在制作一个用于创建事件的网站，并将后端节点代码连接到前端反应代码。错误显示 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: ""
  };```

Answer 1

在调用componentDidMount之前，React会调用render()方法，然后您的this.state.events不是数组，从而使.map不是函数。

要解决此问题：

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

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

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

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

Answer 2

第一次渲染组件时，请检查state.events是否为数组，因为map仅可用于数组。

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

2 个答案: