Почему не обновляется компонент после обновления useState?

Question

[An B]

Есть приложение на React, в котором 2 страницы. Первая страница запускает видео файл на весь экран. Вторая страница должна управлять первой (менять видео).

На второй странице создаю:
<input type="file">
получаю с помощью FileReader и передаю видео из input в родительский компонент (App.jsx) сохраняя в setCurrentVideo. После этого currentVideo отправляю из App.jsx на первую страницу... В App.jsx файл приходит, console.log(currentVideo) показывает, что файл на месте, НО на первой странице не меняется видео.

Подскажите, что я делаю не так?

Нужно чтобы после добавления видео в input на второй странице, первая страница автоматически запускала новое видео (без звука).

function App() {

  const [currentVideo, setCurrentVideo] = useState();

  console.log(currentVideo) // показывает, что файл на месте...

  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<VideoPage currentVideo={currentVideo}/>}/>
        <Route path='/admin' element={<AdminPage setCurrentVideo={setCurrentVideo}/>} />
      </Routes>
    </BrowserRouter>
  );
}
export default App;

function VideoPage({ currentVideo }) {

    return(
        <div className="video-box">
            <video className='video' src={currentVideo} autoPlay loop preload="auto" muted></video>
        </div>
    )
}
export default VideoPage;

Comments

[szQocks]

В разных вкладках и не будет работать, а так я думаю всё работает, просто ты проверяешь в разных вкладках

Answer 1

[DudochkaKseniia]

дело в том, что type='file' не управляемый стейтом reacta, для работы с файлами нужно бы использовать
файл api