Movie' 不能用作 JSX 组件

Question

试图制作一个电影应用程序，但类型不允许我接受参数并显示它们(使用typescript(。问题是我试图将电影对象映射并逐个显示到主页，并显示我获得的所有电影。我还使用了来自themoviedb的api。

这是电影剧本

import React, { useEffect, useRef, useState } from "react";
import { KeyObject } from "tls";
const IMG_API="ImageApi";
interface movie{
title: string;
path: path.ParsedPath;
overview: string;
voteavg: string;
key: KeyObject;
}
const Movie=(movie:movie)=>{
<div className="movie">
<img src={IMG_API+movie.path} alt={movie.title} />
<div className="info">
<h3>{movie.title}</h3>
<span>{movie.voteavg}</span>
</div>
<div className="overview">
<h2>Overview</h2>
<p>{movie.overview}</p>
</div>
</div>
}
export default Movie;

这是主页脚本。

import NavigationBar from "../NavigationBar/NavigationBar";
import Movie from "../Movie";
import React, { useEffect, useRef, useState } from "react";
const FEATURED_API="baseUrl+apiKey";
const HomePage= () =>{
const movieElement=useRef(new Array());
const [movies,setMovie]=useState([]);
useEffect(()=>{
fetch(FEATURED_API).then((res)=>res.json)
.then(data=>{
setMovie(data.arguments);
});
},[]);

return(
<>
<div className="header">
<header>Welcome to the cinema</header>
<NavigationBar/>
</div>
<div className="movie-container">
{movies.map((movie)=><Movie key={movie} {...movies}/>)}
</div>
</>
);
}

const HomePage= () =>{
const movieElement=useRef(new Array());
const [movies,setMovie]=useState([]);
useEffect(()=>{
fetch(FEATURED_API).then((res)=>res.json)
.then(data=>{
setMovie(data.arguments);
});
},[]);

return(
<>
<div className="header">
<header>Welcome to the cinema</header>
<NavigationBar/>
</div>
<div className="movie-container">
{movies.map((movie)=><Movie key={movie} {...movies}/>)}
</div>
</>
);
}

Answer 1

当函数体有((即圆括号时，返回是隐式的。即，花括号中的任何内容都将自动返回

const Movie=(movie:movie)=>(
<div className="movie">
<img src={IMG_API+movie.path} alt={movie.title} />
<div className="info">
<h3>{movie.title}</h3>
<span>{movie.voteavg}</span>
</div>
<div className="overview">
<h2>Overview</h2>
<p>{movie.overview}</p>
</div>
</div>
)

当你的函数体有一个｛｝即花括号时，你必须显式地使用return关键字来返回

const Movie=(movie:movie)=>{
return (
<div className="movie">
<img src={IMG_API+movie.path} alt={movie.title} />
<div className="info">
<h3>{movie.title}</h3>
<span>{movie.voteavg}</span>
</div>
<div className="overview">
<h2>Overview</h2>
<p>{movie.overview}</p>
</div>
</div>
)
}

Answer 2

在下面的代码中，如果您使用了｛｝，则必须手动将JSX返回为：

const Movie=(movie:movie)=>{
return (
<div className="movie">
<img src={IMG_API+movie.path} alt={movie.title} />
<div className="info">
<h3>{movie.title}</h3>
<span>{movie.voteavg}</span>
</div>
<div className="overview">
<h2>Overview</h2>
<p>{movie.overview}</p>
</div>
</div>
)
}

这就是它所抱怨的，如果你没有使用{}，那么它会使用ES6简短的箭头函数自动返回它。