當我的圖表組件呈現時出現錯誤，因為它的初始狀態是 API 響應之前的空數組。它會說這樣的話Cannot read property '0' of undefined是因為當組件加載時，它的初始狀態是，好吧......一個空數組。所以我想知道是否有辦法讓組件僅在收到 API 響應后才呈現。這是父組件：function InformationPage({    match: {        params: { symbol },    },}) {    const [chartData, setChartData] = useState([]); {/*Declaring state*/}useEffect(() => {  {/*Fetching API response here to set state*/}    axios        .get(            `https://finnhub.io/api/v1/stock/candle?symbol=${symbol}&resolution=15&from=1572651390&to=1602623478&token=xxxxxxxxx`        )        .then((res) => {            console.log(res.data);            setChartData(res.data);        })        .catch((err) => {            console.log(err);        });}, [symbol]);return (            <Grid item container xs={12} sm={12} md={6} lg={8}>            {chartData && <QuoteChart chartData={chartData} iex={iex} />}        </Grid>       );}export Default InformationPage;這是子圖表組件，基本上當我從 axios 執行獲取請求時，它返回一個將映射到對象中的數組chartRender。我只需要找到一種方法來僅在 axios 的 api 請求完成后才呈現組件，以免出現錯誤。任何幫助將不勝感激。function QuoteChart(props) {    const classes = useStyles();    const { chartData } = props;    const chartRender = chartData.map((chartConfig) => ({        x: new Date(chartConfig?.t),        y: [chartConfig?.o, chartConfig?.h, chartConfig?.l, chartConfig?.c],    }));    // const chartDataLog = console.log(chartData);    const config = {        series: [            {                data: [{ chartRender }],            },        ],