TypeError: cars.map is not a function - ReactJs

Question

我正在尝试将所有数据放入 table 并且我正在使用 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>

Answer 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> ....

TypeError: cars.map is not a function - ReactJs

TypeError: cars.map is not a function - ReactJs

crud

reactjs

axios

react-hooks