Javascript React 在 api 数据到达之前渲染

我在一个对象中有一个ojbect，我想提取子对象来映射它，但在数据到达之前，组件已经被读取

主对象名为Movie，子对象名为Categories

我想绘制Categories张 map ，但上面写着"未找到".

import Card from '../UI/Card';
import classes from './MovieDetails.module.css';
import MovieCategoris from './MovieCategories';
import ReactPlayerProps from "react-player";

const MovieDetails = (props) => {

    const Movie = props.Movie
    const image = Movie.Image;
    const Categories = Movie.Categories
    const videoSrc = Movie.Video;

    return (
        <Card>
            <div className={classes.VideoPlayer}>
                <ReactPlayerProps
                    controls
                    volume={1}
                    muted={false}
                    width={"100%"}
                    height={"100%"}
                    url={videoSrc}

                />
            </div>
            <div className={classes.DetailsBox}>
                <div className={classes.Details}>
                    <div className={classes.Title}>
                        <img src={image} />
                    </div>
                    <div className={classes.MovDet}>
                        <h3>{Movie.Title}</h3>
                        <ul>
                            <li>Duration: <label>{Movie.Duration}</label></li>
                            <li>Quality: <label>HD 720</label></li>
                            <li>release date: <label>{Movie.Year}</label></li>
                            <li>IMBb: <label>{Movie.Rate}</label></li>
                        </ul>
                        <h5>Categories</h5>
                        {/* <div>
                            <ul className={classes.Cat_li}>
                                {Categories.map((cat) =>
                                    <li>{cat}</li>
                                )}
                            </ul>
                        </div> */}
                    </div>
                    <div className={classes.Desc}>
                        <p> {Movie.Description} </p>
                    </div>
                </div>
            </div>
        </Card>
    )
}
export default MovieDetails;

这是一个获取api数据并使用props 将其转发到组件的函数.

import MovieDetails from "../components/Content/MovieDetails";
import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import FetchedMovie from '../Hooks/fetchSingleMovie'

const MovieDetailsPage = () => {
    const [MovieData, setMovieData] = useState([])
    const MovieId = useParams()
    async function Movie(MovieId) {
        const id = MovieId.movie
        const result = await FetchedMovie(id)
        setMovieData(result)
        return result
    }

    useEffect(() => {
        Movie(MovieId)
    }, [])
    return <MovieDetails Movie={MovieData} />
}

export default MovieDetailsPage;

this is the object i have on the api sever