Значение свойства в this.props.params по какой-то причине превращается в 'a'.Я console.logging в componentDidMount ()

Question

Я регистрирую значение params в componentDidMount в этом компоненте:

import React from 'react';
import VideoSingle from './VideoSingle';

class Single extends React.Component {
  constructor(props){
    super(props);
    this.state = {}
  }

  componentDidMount() {
    console.log(this.props.params,'params value')

  }

  render(){

    return (

      <div className="flex flex-wrap justify-center ">
        <VideoSingle {...this.props}  /> 
      </div>

    );
  }
};

export default Single;

Рисунок, показывающий результаты моего console.log, я ввожу 'http://localhost:3001/course/20/video/3' прямо в URL

Проблемный маршрут выглядит так: «/ course /: courseId / video /: videoId».Вот маршруты, которые я использую (реакции-маршрутизатор):

import React from 'react';
import { render } from 'react-dom';

// Import Components
import App from './components/App';
import Single from './components/Single';
import VideoGrid from './components/VideoGrid';
import CourseGrid from './components/CourseGrid';

// Import react router deps
import { Router, Route, IndexRoute, } from 'react-router';
import { Provider } from 'react-redux';
import store, { history } from './store';

render(
  <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={App}>
        <IndexRoute component={CourseGrid} />
        <Route path="/course/:courseId" component={VideoGrid}></Route>
        <Route path='/course/:courseId/video/:videoId' component={Single}></Route>
      </Route>
    </Router>
  </Provider>,
  document.getElementById('root')

Я не могу понять, почему значение свойства в «this.props.params» превращается в «a».Я хочу знать, почему это происходит и как это исправить.

Репо: https://github.com/phelpa/YouList

Answer 1

Я понимаю, почему компонент <VideoSingle>, который рендерился, имел:

<iframe title = 'iframeYoutube' className="h-100 w-100 db  br2 br--top"
      src={'a'} frameBorder="0" allow="autoplay; encrypted-media"
      allowFullScreen="allowFullScreen"></iframe>

По какой-то причине src={'a'} «просачивался» в this.props.params.videoId и дляпо какой-то причине он воспроизводился 3 раза

Я изменил src = {'a'} на фактический источник, такой как src={'https://www.youtube.com/embed/fB0IHPGuTFo'}

, и проблема прекратилась.