错误构建下一个js，输入错误：“carData”可能是“未定义”

Question

我在下一个js中遇到这个组件的问题，如果我执行npm run dev它可以工作，问题是当我尝试生成下一个js构建时，它返回这个错误

./pages/marcas/[marca].tsx:66:30
Type error: 'carData' is possibly 'undefined'.
> 66 |                             {carData.cars && carData.cars.length > 0 ? (
     |                              ^

组件的代码是这样的

import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import Header from '@/app/components/template/Header';
import Footer from '@/app/components/template/Footer';
import Content from '@/app/components/template/Content';
import '../../app/styles/globals.css';
import Link from 'next/link';
import { CarData } from '@/app/types/types';

const capitalizeWords = (str: string) => {
    return str.replace(/\b\w/g, (char) => char.toUpperCase());
};

const MarcaDetailPage = () => {
    const router = useRouter();
    const { marca } = router.query;
    const [carData, setCarData] = useState<CarData>();
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        const fetchCarData = async () => {
            try {
                const response = await fetch(
                    `http://localhost:8000/api/cars/brand/${marca}`
                );
                const data = await response.json();
                setCarData(data);
                setIsLoading(false);
            } catch (error) {
                console.error('Error fetching car data:', error);
                setIsLoading(false);
            }
        };

        if (marca) {
            fetchCarData();
        }
    }, [marca]);


    return (
        <>
            <Header />

            <Content>
                {isLoading ? (
                    <div>Loading...</div>
                ) : (
                    <div className="container mx-auto py-8">
                        <h1>Cars {brand}</h1>
                        <div className="grid grid-cols-1">
                            {carData.cars && carData.cars.length > 0 ? (
                                carData.cars.map((car) => (
                                    <div key={car.id} className="p-4 border">
                                    
                                        <p className="mt-4 text-lg font-semibold">
                                            Modelo: {car.model}
                                        </p>
      
                                    </div>
                                ))
                            ) : (
                                <div>Error</div>
                            )}
                        </div>
                    </div>
                )}
            </Content>

            <Footer />
        </>
    );
};

export default MarcaDetailPage;

我正在尝试使用 carData 接口从 API 获取对象数组并一一显示它们。当我尝试使用 carData 接口时，我认为错误出现在地图中，但我无法解决它

汽车数据接口

export interface CarData {
    id: number;
    model: string;
    battery_kw: number;
    brand: {
        name: string;
        slug: string;
    };
    year_ini: number;
    year_end: number | null;
    power: number;
    sku_vehicle: string;
    initial_price: number;
    car_images: { id: number; ruta_imagen: string }[];
}

我已经在google、stackoverflow、甚至chatGPT中搜索过帮助，但我看不到解决方案

Answer 1

在

useState()

代码中，您没有为

carData

设置初始状态，因此在

fetch()

解析之前它是未定义的 - 因此在构建期间出现错误。

您可以将代码更改为

carData?.cars

以指定 carData 可以是未定义的（并且 cars 数组也不能存在）。