使用新数据ReactJs刷新DOM

Question

就API调用和应答而言，一切都与我的代码配合使用。我的问题在于显示数据。第一次渲染时，DOM上的一切看起来都很好，但第一次渲染后的任何搜索都会将一切叠加在一起，而不是刷新。。我想知道如何从第一次渲染中删除数据，并用新数据填充电影组件。非常感谢所有的帮助！我想这是个小问题，可能是钩子的问题，但我已经挠头太久了。

该块是API调用

const [movies, setMovie] = useState([]);
const [search, setSearch] = useState("");
const [isLoaded, setIsLoaded] = useState(false);
const handleInput = e => {
setSearch(e.target.value);
};
const handleSubmit = e => {
e.preventDefault();
setIsLoaded(true);
};
useEffect(() => {
if (isLoaded) {
getMovies(search);
setIsLoaded(false);
} // eslint-disable-next-line
}, [isLoaded]);
Axios.get(
`http://www.omdbapi.com/?t=${search}&plot=full&apikey=183ac7ca`
).then(res => {
console.log(res.data);
let movieObject = {
title: res.data.Title,
poster: res.data.Poster,
rated: res.data.Rated,
released: res.data.Released,
runtime: res.data.Runtime,
genre: res.data.Genre,
director: res.data.Director,
writer: res.data.Writer,
actors: res.data.Actors,
plot: res.data.Plot,
awards: res.data.Awards,
id: res.data.imdbID
};
setMovie([...movies, movieObject]);
});

这个块是我的电影组件，我将数据映射到JSX

return movies.map(movie => (
<div key={movie.id}>
<div className="poster-title">
<ul>
<li>
<img
height="450"
width="350"
className="poster"
alt=""
src={movie.poster}
></img>
</li>
<li>
<h1 className="title" key={movie.title}>
{movie.title}
</h1>
<small>{movie.runtime}</small>
</li>
</ul>
</div>
<div className="rating-genre">
<h1 className="rating" key={movie.id}>
{movie.rated}
</h1>
<h1>{movie.genre}</h1>
</div>
<h3 className="plot">{movie.plot}</h3>
<div className="movie-info">
<p>Director: {movie.director}</p>
<p>Writer(s): {movie.writer}</p>
<p>Leading Actors: {movie.actors}</p>
<p>{movie.awards}</p>
<small className="released">Released: {movie.released}</small>
</div>
</div>
));
};

Answer 1

在行中

setMovie([...movies, movieObject]);

您正在使用排列运算符来复制现有影片并附加新影片。

只需移除排列

setMovie([movieObject]);