Обновление DOM с новыми данными ReactJs - PullRequest
Новая
       17

Обновление DOM с новыми данными ReactJs

0 голосов
/ 22 февраля 2020

Все работает с моим кодом, до вызова и ответа 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]);
    });

This блок - это мой компонент mov ie, в котором я сопоставляю данные с 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>
  ));
};

1 Ответ

0 голосов
/ 23 февраля 2020

В этой строке 

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

Вы используете оператор распространения, чтобы скопировать существующие фильмы и добавить новые фильмы.

Просто удалите разворот 

setMovie([movieObject]);
...