Reactjs 分析错误：意外的标记，应为“&引用；在app.js文件中

我的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;

import React，{useffect，useState}来自“React”；
从“./components/Movie”导入电影；
const_API=”https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1";
常量IMG_API=”https://image.tmdb.org/t/p/w1280";
const SEARCH_API=”https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query=";
函数App（）{
const[movies，setMovies]=useState（[]）；
useffect（（）=>{
获取（API）
.然后（（res）=>res.json（））
。然后（（数据）=>{
控制台日志（数据）；
setMovies（data.results）；
});
}, []);
返回{movies.length>0&&
movies.map（（movie）=>）}；
}
导出默认应用程序；

试试下面的代码

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;

函数应用程序（）{
const[movies，setMovies]=useState（[]）；
useffect（（）=>{
获取（API）
.然后（（res）=>res.json（））
。然后（（数据）=>{
控制台日志（数据）；
setMovies（data.results）；
});
}, []);
返回{movies.length>0&&
movies.map（（movie）=>{movie}）；
}
导出默认应用程序；

有几点需要纠正

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

return{movies.length>0&&
movies.map（（movie）=>）}；

将返回语句括在函数括号中是一种很好的做法

您没有呈现组件，而是添加了一个条件

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

返回(
{movies.length>0？
movies.map（movie=>）：null}
);

---

您是否尝试将movies.map函数的某一行设置为空？例如：{movies.length>0&&movies.map（（movie）=>）}；

movies.map（（movie）=>

-此行不匹配，具体哪一行出现错误？@Newton，似乎没有错误，但最好按照最佳实践进行测试…return（{movies.length>0&&movies.map（（movie，index）=>）}；我猜他不是在试图渲染'movie'，而是在顶部第二行导入的'movie'。