Question

左侧有章节列表，右侧有下一个/上一个按钮。（如下图所示）

当我在章节之间导航时，它工作正常。当我只单击下一个/上一个按钮时，它也可以正常工作。但是，当我选择一章然后单击下一章或上一章时，出现错误：TypeError：无法读取未定义的属性“视频”。

我的组件：

import React, { Component, useEffect, useState } from 'react';
import './App.css';

var source = '/Videos/Part1.mp4';

var videos = [
  {
    Chapitre: 'Intro',
    video: '/Videos/part0 - training 1.mp4'
  },
  {
    Chapitre: 'The need of 5G',
    video: '/Videos/Part1.mp4'
  },
  {
    Chapitre: '5G potential use cases',
    video: '/Videos/Part 2.mp4'
  },
  {
    Chapitre: '5G technical requirements',
    video: '/Videos/Part 3.mp4'
  },
  {
    Chapitre: 'Timeline for 5G standards and roll out',
    video: '/Videos/Part 4.mp4'
  },
  {
    Chapitre: 'Quiz',
    video: '/Videos/Part 5.mp4'
  }
];

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      indice: 0
    }
    //this.SelectChapiter = this.SelectChapiter.bind(this);
    this.Next = this.Next.bind(this);
    //this.Previous = this.Previous.bind(this);
  }
  

  SelectChapiter(index) {
    this.setState({ indice: index });
    document.getElementById('change').src = videos[index].video;
};

Next () {
  alert(videos[this.state.indice].video)
  if(this.state.indice != 5){
    //this.setState({ indice: this.state.indice + 1 });
    this.SelectChapiter(this.state.indice + 1);
    
  }
};

Previous () {
  alert(this.state.indice)

  if(this.state.indice != 0){
    //this.setState({ indice: this.state.indice + 1 });
    this.SelectChapiter(this.state.indice - 1);
}
}
  render() { 
    return (
      <div>
        <div className="LeftNav">
          <div className="FormationName">5G Associate Training_01M01</div>
          <div id="Obj">Objective of training</div>
          <ul className= "chapitres">
            <button onClick={() => this.SelectChapiter('0')}>Intro</button><br/>
            <button onClick={() => this.SelectChapiter('1')}>The need of 5G</button>
            <button onClick={() => this.SelectChapiter('2')}>5G potential use cases</button>
            <button onClick={() => this.SelectChapiter('3')}>5G technical requirements</button>
            <button onClick={() => this.SelectChapiter('4')}>Timeline for 5G standards</button><br/>
            <button onClick={() => this.SelectChapiter('5')}>Quiz</button>
          </ul>
        </div>
  
        <div className="control">
          <input onClick={this.Previous} className="icon" type="image" src="/Assets/previous.png" />
          <input onClick={this.Next} className="icon" type="image" src="/Assets/next.png" />
        </div>
        <video className="VidéoSection" id = "change" controls>
            <source src='/Videos/part0 - training 1.mp4' type="video/mp4"/>
          Your browser does not support the video tag.
        </video>
      </div>
  
      
    );
  }
}

export default App;

应用程序的屏幕：

Answer 1

我终于解决了这个问题。正如 Phil 所说，我应该将数字而不是字符串传递给 SelectChapiter()，我还应该绑定 Previous。

新代码：

import React, { Component } from "react";
import "./App.css";

var videos = [
  {
    Chapitre: "Intro",
    video: "/Videos/part0 - training 1.mp4",
  },
  {
    Chapitre: "The need of 5G",
    video: "/Videos/Part1.mp4",
  },
  {
    Chapitre: "5G potential use cases",
    video: "/Videos/Part 2.mp4",
  },
  {
    Chapitre: "5G technical requirements",
    video: "/Videos/Part 3.mp4",
  },
  {
    Chapitre: "Timeline for 5G standards and roll out",
    video: "/Videos/Part 4.mp4",
  },
  {
    Chapitre: "Quiz",
    video: "/Videos/Part 5.mp4",
  },
];

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      indice: 0,
    };
    this.Next = this.Next.bind(this);
    this.Previous = this.Previous.bind(this);
  }

  SelectChapiter(index) {
    this.setState({ indice: index });
    document.getElementById("change").src = videos[index].video;
  }

  Next() {
    if (this.state.indice != 5) {
      this.SelectChapiter(this.state.indice + 1);
    }
  }

  Previous() {
    alert(this.state.indice);

    if (this.state.indice != 0) {
      this.SelectChapiter(this.state.indice - 1);
    }
  }
  render() {
    return (
      <div>
        <div className="LeftNav">
          <div className="FormationName">5G Associate Training_01M01</div>
          <div id="Obj">Objective of training</div>
          <ul className="chapitres">
            <button onClick={() => this.SelectChapiter(0)}>Intro</button>
            <br />
            <button onClick={() => this.SelectChapiter(1)}>
              The need of 5G
            </button>
            <button onClick={() => this.SelectChapiter(2)}>
              5G potential use cases
            </button>
            <button onClick={() => this.SelectChapiter(3)}>
              5G technical requirements
            </button>
            <button onClick={() => this.SelectChapiter(4)}>
              Timeline for 5G standards
            </button>
            <br />
            <button onClick={() => this.SelectChapiter(5)}>Quiz</button>
          </ul>
        </div>

        <div className="control">
          <input
            onClick={this.Previous}
            className="icon"
            type="image"
            src="/Assets/previous.png"
          />
          <input
            onClick={this.Next}
            className="icon"
            type="image"
            src="/Assets/next.png"
          />
        </div>
        <video className="VidéoSection" id="change" controls>
          <source src="/Videos/part0 - training 1.mp4" type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      </div>
    );
  }
}

export default App;

反应：类型错误：无法读取未定义的属性“视频”

1 个答案: