Ошибка типа: cars.map не является функцией - ReactJS

#reactjs #axios #react-hooks #crud

Вопрос:

Я пытаюсь собрать все данные в таблицу, и я использую reactjs и крючки для реализации CRUD, поэтому я получил эту ошибку, пожалуйста, кто-нибудь может помочь мне решить эту проблему.

Вот код :

 const [car, setCarh] = useState(initialState)

  useEffect(()=> {
      retrieveCars();
      
    }, [])

    const retrieveCars =() =>{
      DataService.getAll()
      .then(response => {
        
         setCarh(response.data) 
       
        console.log(response.data);
      })
      .catch(e => {
        console.log(e);
      });
       
    }
<tbody>
                {
                  cars.map((data) => (
                    <tr >
                    
                    <th scope="row">{data.idCars}</th>  
                  
                  <td>{data.carName}</td>
                  <td>{data.carModel}</td>
                  <td>
                  <Link to={"/classement/update/"   data.idCars}
                    className="btn btn-info"
                    >
                    Edit
                   </Link>

1. Как вы определили начальное состояние? убедитесь, что это массив

2. @ErfanNaghashlou константа initialState = { idCars: null, карНаме: «», кармодель: «» };

3. Попробуйте console logging car и посмотрите, действительно ли это массив

4. @Petar18 вот журнал консоли 0: {idCars: 97, carName: «Тигуан», модель автомобиля: «Фольксваген»} длина: 3 [[Прототип]]: Массив(0)

Ответ №1:

изначально вы определяете автомобили как объект:

  initialState = { idCars: null, carName: "", carModel: "" }

у объектов нет метода сопоставления.

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

если вы хотите показать данные одного автомобиля, вам не нужно использовать карту. например:

     const [car, setCar] = useState(initialState)

         return (<tr >
                
                <th scope="row">{car.carName}</th>  
              
              <td>{data.carModel}</td>
              <td></tr> ....