使用新数据刷新 DOM ReactJs

Question

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

这个区块是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]);

使用新数据刷新 DOM ReactJs

Refreshing DOM with new data ReactJs

dom

render

reactjs