React 在 api 数据到达之前渲染

Question

我在一个对象中有一个对象，我想提取子对象来映射它，但是在数据到达之前读取了该组件

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

我想映射 Categories 但它说未定义。

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

Answer 1

这是因为 api 将在您第一次调用 moviedetails 后呈现；您可以在每次定义映射之前使用 if，映射函数如下：{categories && categories.map ... };因为每次道具更改页面都会重新呈现；

Answer 2

那是因为您在 MovieDetailsPage

的 MovieDetails 组件中传递了一个空数组

您可以在数据准备就绪时呈现 MovieDetails

试着改成这样

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(null)
    const MovieId = useParams()
    async function Movie(MovieId) {
        const id = MovieId.movie
        const result = await FetchedMovie(id)
        setMovieData(result)
        return result
    }

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

export default MovieDetailsPage;

React 在 api 数据到达之前渲染

React is rendering before api data arrived

javascript

components

reactjs

fetch-api