Как я могу реагировать на рендеринг новых изменений состояния после того, как я обновил состояние с помощью ловушек и контекста?

Question

Я создал компонент AddMovie, который добавит фильм в текущее состояние в компоненте контекста. И я сделал так, чтобы он обновлял количество фильмов после добавления каждого фильма, и я также сделал так, чтобы он добавлял последний добавленный фильм в DOM вместе с остальными фильмами. Проблема в том, что название последнего фильма не отображается вместе с другими фильмами.

Я всегда могу заставить это работать, если я делаю это с традиционными классами, но я хочу выяснить, в чем причина такого поведения. Есть несколько простых компонентов, которые не так много, чтобы прочитать, и вы можете проверить это здесь:

https://codesandbox.io/s/v661kq4zx3

Дело в том, что когда я добавляю больше фильмов, количество элементов в массиве фильмов из компонента контекста обновляется. Проблема, которую я хочу решить, заключается в том, чтобы вновь добавленный фильм отображался вместе с другими.

Спасибо.

Answer 1

Вы связываете название нового фильма с атрибутом name, но в своем компоненте Movie вы используете атрибут title для отображения title.

Просто измените функцию addMovie внутри компонента AddMovie, чтобы сохранить новый заголовок в атрибуте title.

const addMovie = evt => {
    evt.preventDefault();
    setMovies(prevMovies => [
      ...prevMovies,
      { title: name, overview: "OK", id: movies.length + 1 } // <--- Here was previously `name` instead of `title`
    ]);
};

Answer 2

попробуйте это:

const addMovie = evt => {
 evt.preventDefault();
 setMovies(prevMovies => [
   ...prevMovies,
   { title: name, overview: "OK", id: movies.length + 1 }
 ]);
};