Как отобразить новый пост в реакции с axios?

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

Когда ваш компонент отображается впервые, проверьте, является ли state.events массивом, так как map может использоваться только с массивом.

Answer 2

До вызова componentDidMount React вызывает метод render(), и когда это происходит, this.state.events не является массивом, в результате чего .map не является функцией.

Для решения этой проблемы:

В вашем конструкторе установите events на пустой массив

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

Затем, когда компонент впервые рендерится (до вызова componentDidMount), this.state.events будет пустым массивом,это означает, что .map() будет функцией, и она не выдаст эту ошибку. После этого componentDidMount вызывается, вызывая API и заполняя ваше состояние, это вызывает повторную визуализацию, и ваш пользовательский интерфейс должен быть заполнен.

Дополнительное примечание: вы не должны делать вызовы API в своем конструкторе,для этого componentDidMount.