TypeError：cars.map 不是函数 - ReactJs答案

【问题标题】：TypeError: cars.map is not a function - ReactJsTypeError：cars.map 不是函数 - ReactJs
【发布时间】：2021-11-02 21:36:02
【问题描述】：

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

【问题讨论】：

你是如何定义initialState的？确保它是一个数组
@ErfanNaghashlou const initialState = { idCars: null, carName: "", carModel: "" };
尝试控制台记录汽车，看看它是否真的是一个数组
@Petar18 这里是控制台日志 0: {idCars: 97, carName: 'Tiguan', carModel: 'Volkswagen'} length: 3 [[Prototype]]: Array(0)

标签： reactjs axios react-hooks crud

【解决方案1】：

最初，您将汽车定义为一个对象：

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

对象没有 map 方法。

如果您要显示不止一辆汽车的数据，您需要创建一个数组并用对象填充它，每个对象代表一辆汽车。

如果要显示单辆车的数据，则不需要使用地图。例如：

    const [car, setCar] = useState(initialState)

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

【讨论】：

谢谢，我加了这个： const [cars, setCarhs] = useState([]);它有效