Изменение currentTime с использованием React Component State

Question

Вот ссылка на песочницу .Я ищу лучший способ манипулировать currentTime элемента <video>.В своей песочнице я смог сделать это, вызвав функцию кнопки seek(), которая изменяет состояние video, ссылка на document.getElementById('video-player'), см. Ниже.

export default class VideoPlayer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      source: props.source,
      timestamp: props.timestamp
    };
  }

  componentDidMount() {
    this.setState({ video: document.getElementById('video-player') })
  }

  componentDidUpdate(prevProps) {
    if (this.props !== prevProps) {
      this.setState(
        { timestamp: this.props.timestamp }, 
        () => { this.seek() }
      );
    }
  }

  seek = () => {
    console.log(this.state.timestamp)
    //works
    this.state.video.currentTime = 1;
    //doesn't work
    //this.state.video.currentTime = this.state.timestamp;
  }

  render() {
    return (
      <div>
        <video 
          id='video-player'
          height='200px'
          src={this.state.source} 
          type='video/mp4'
          controls>
        </video>
        {/* I don't want this button. I want skip from the outside */}
        <button onClick={this.seek}>Skip Inside Component</button>
      </div>
    );
  }
}

То, что я не могу понять, это то, что я могу изменить только currentTime внутри компонента, потому что по какой-то причине я не могу назначить this.state.timestamp дляcurrentTime моей <video> ссылки (this.state.video.currentTime).

В конечном итоге компонент должен получать props.timestamp, предоставленный Redux, вызывать seek() внутри <VideoPlayer /> всякий раз, когда изменяется состояние Redux, и устанавливать для currentTime видео значение this.state.timestamp.

Позвольте мнезнать, если вам, ребята, нужны какие-то подробности.Заранее спасибо!

РЕДАКТИРОВАТЬ: Ответ выше, но у меня все еще есть проблема.Песочница, которую я поделился и только что исправил, все еще не будет работать в моем проекте rails .У меня было чувство, что это не так.При нажатии одной из трех кнопок в App.js состояние в Redux меняется и успешно принимается <VideoPlayer>.Это подтверждается моим console.log внутри seek(), который возвращает значение соответствующей кнопки на консоль.Тем не менее, currentTime видео по-прежнему не меняется.Есть идеи?

Answer 1

реагирующее состояние обычно используется для управления состоянием пользовательского интерфейса, например: пауза, воспроизведение, currentTime и т. Д., Поэтому вам следует избегать присвоения элементу dom состояния this.setState({ video: document.getElementById('video-player') })

, если вы хотите изменить состояниеиз реакции никогда не используйте this.state = что-то , как ваша функция поиска.вместо этого используйте функцию setState.

Answer 2

В mapStateToProps ваш state равен timestamp, а не state.timestampReducer.

Это должно работать:

const mapStateToProps = (state) => {
  return {
    timestamp: state
  }
};