如何将API信息从react组件传递到另一个组件？

编程问答 2022-08-14

问题描述

我正在使用带有电影API（https://developers.themoviedb.org）的React应用程序战斗。我有一个带有电影和电视卡的列表组件。我映射一个列表状态，然后将信息放入我的卡片（ID，标题和海报）中。当我单击卡时，该站点必须显示电影信息。因此，我还有一个名为Movies.jsx的组件，还有另外三个组件：hero.jsx（包含电影中的img），menuHero.jsx（菜单）和movieInfo.jsx（其中包含标题）电影和blabla的说明）。我需要用api信息填充这三个组件。 我的组件movies.jsx显示了ID（我将其放在

中只是为了查看其是否正常工作），但是我找不到将它们的api信息提供给另外三个子组件的方法。

此外，movieData为空。所以，我不知道我在做什么错。

这是我的代码：

const Movies = props => {
    
    const [movieData,setMovieData] = useState([]);
    const { match } = props;
    const movieId = match.params.id;
   
    
    useEffect(() => {
        axios.get(`https://api.themoviedb.org/3/movie/${movieId}?api_key=${api-key}`)
            .then(res => {
                setMovieData(res.data);
                console.log(movieData)
            }).catch(error => console.log(error))
    },[]);

    return(
        <div className="container-section">
            <h2>{match.params.id}</h2>
            <Hero />
            <MenuHero />
            <MovieInfo />
        </div>
    )
}

export default Movies; 
    enter code here

解决方法

您可以将该数据作为道具传递：

return movieData && (
        <div className="container-section">
            <h2>{match.params.id}</h2>
            <Hero movieData={movieData} />
            <MenuHero movieData={movieData} />
            <MovieInfo movieData={movieData} />
        </div>
    )

更多信息：https://reactjs.org/docs/components-and-props.html

,

您需要从themoviedb获取一个API密钥和电影ID， $ {movieId} $ {api-key} 应该是您的密钥，应将其存储为环境变量。 （.env）文件并访问该密钥，您需要使用process.env。（VARIABLE_NAME）获得所需的值。这就是为什么您没有从get请求中获取任何数据的原因。

apiapijavascriptreactjsreactjsthemoviedb-api