使用新数据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]);

Answer 2

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]);

忘记提及我在这些参数中使用useEffect