Блог

Главная - Вопросы по программированию - Ошибка реакции .map () не является функцией после обновления данных API

Ошибка реакции .map () не является функцией после обновления данных API

#reactjs #api #dictionary

#reactjs #API #словарь

Вопрос:

В настоящее время я работаю над проектом, в котором мое приложение react подключается к моему собственному API. Я столкнулся с проблемой, которую, похоже, не могу преодолеть. Когда я пытаюсь обновить свои данные, я получаю сообщение об ошибке, в котором говорится, что map не является функцией.

это мой vehicleOverview.js предполагается, что этот скрипт отображает список всех моих доступных данных, который работает нормально, пока я не обновлю элемент данных.

 export class VehicleOverview extends React.Component{
constructor(props){
    super(props);

    this.state= {
        vehicles: [],
    }
    getAll().then((response) => {
        console.log(response.message);
  
        this.setState({
          vehicles: response.message,
        });
  
      }).catch((error) => {
        console.error(error);
      });
}
render(){
    return(
        <div >
        <h2>Vehicle List</h2>
        <ul >
        {    
          this.state.vehicles.map((vehicle, i) => {
             return(
            <Vehicle key={`vehicle-${i}`} {...vehicle} />);
          })     
        }
        </ul>
        </div>

    );
}
}
export default VehicleOverview;

Я не уверен, что происходит не так, потому что я почти уверен, что vehicles — это массив. Скажите, нужно ли мне предоставить больше кода для решения этой проблемы

Ответ №1:

Я заметил здесь две вещи:

  1. Использование this.setState в конструкторе не рекомендуется, поскольку компонент еще не отрисован.
  2. Всегда выполняйте вызовы api из componentDidMount — По причинам, упомянутым в этой статье

Также, на всякий случай, добавьте условие перед циклическим перебором транспортных средств.

 import React from 'react';

export class VehicleOverview extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      vehicles: []
    };
  }

  componentDidMount() {
    getAll().then((response) => {
      console.log(response.message);
      this.setState({
        vehicles: response.message
      });
    }).catch((error) => {
      console.error(error);
    });
  }

  render() {
    return (
      <div >
        <h2>Vehicle List</h2>
        <ul>
          {this.state.vehicles amp;amp; this.state.vehicles.map((vehicle, i) => (<Vehicle key={`vehicle-${i}`} {...vehicle} />))}
        </ul>
      </div>

    );
  }
}
export default VehicleOverview;

Комментарии:

1. Спасибо за ваш ответ, я прочитал статью, которую вы предоставили, и это имеет смысл. Итак, теперь я использовал componentDidMount, но он по-прежнему выдает мне ту же ошибку. Может быть, мне также нужно реализовать componentdidmount в моем скрипте, где я редактирую свои данные, потому что все идет не так после обновления данных

2. Нет, componentDidMount должен быть определен только один раз, это метод жизненного цикла, можете ли вы сказать мне, какую ошибку он показывает?

3. ошибка => TypeError: this.state.vehicles.map не является функцией

4. Я думаю, когда я обновляю свои данные. данные действительно больше не являются массивом. Я просто не уверен, почему он не форматируется как массив после того, как я его обновлю

5. Вы имеете в виду response.message , что это не массив?

Ответ №2:

.функция map () будет работать только для массивов данных. проверьте, какой тип ответа вы получаете.