解析错误：意外令牌，应用.js文件中的预期","

Question

我有这个"解析我的app.js文件中的错误。我试着寻找可能导致错误的原因，但似乎什么都看不到。

import React, {useEffect, useState} from "react";
import Movie from './components/Movie';
const FEATURED_API ="https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1";
const IMG_API = "https://image.tmdb.org/t/p/w1280";
const SEARCH_API = "https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query=";
function App() {
const [ movies, setMovies ] = useState([]);
useEffect(() => {
fetch(FEATURED_API)
.then((res) => res.json())
.then((data) => {
console.log(data);
setMovies(data.results);
});
}, []);
return <div>{movies.length > 0 && 
movies.map((movie) => <Movie />)}</div>;
}
export default App;

Answer 1

尝试以下代码，

function App() {
const [ movies, setMovies ] = useState([]);
useEffect(() => {
fetch(FEATURED_API)
.then((res) => res.json())
.then((data) => {
console.log(data);
setMovies(data.results);
});
}, []);
return <div>{movies.length > 0 && 
movies.map((movie) => <React.Fragment key={index}>{movie}</React.Fragment>)}</div>;
}
export default App;

Answer 2

有几个点需要纠正

return <div>{movies.length > 0 && 
movies.map((movie) => <Movie />)}</div>;

1. 将return语句括在函数括号中是一种很好的做法。

2. 您只添加了一个条件，而不是渲染组件。它应该像这个

   return (
   <div>
   {movies.length > 0 ?
   movies.map(movie => <Movie key={movie.id} movie={movie}/>) :null}
   </div>
   );