Question

一直在寻找这个。无法理解为什么我得到错误。这是一个反应应用程序，波形，播放跳过前进和后退按钮都工作，但点击笔记没有，他们的意思是跳到相应的时间戳单击。当我点击一个音符时，它说我在控制台中出现NaN错误。错误似乎源于底层div。任何帮助将不胜感激。

import React from "react";
import ReactDOM from "react-dom";
import Wavesurfer from "react-wavesurfer";
import audio from "./PM1.mp3";

require("wavesurfer.js");

export default class Waveform extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      playing: false,
      pos: 0
    };
    this.handleTogglePlay = this.handleTogglePlay.bind(this);
    this.handlePosChange = this.handlePosChange.bind(this);
  }

  handleTogglePlay() {
    this.setState({
      playing: !this.state.playing
    });
  }
  handlePosChange(e) {
    this.setState({
      pos: e.originalArgs ? e.originalArgs[0] : +e.target.value
    });
  }
  render() {
    const waveOptions = {
      progressColor: "darkorange",
      waveColor: "orange"
    };
    let notes = this.props.notes;
    return (
      <div>
        <Wavesurfer
          audioFile={audio}
          pos={this.state.pos}
          onPosChange={this.handlePosChange}
          playing={this.state.playing}
          options={waveOptions}
        />

        <button
          value={this.state.pos - 5}
          onClick={value => this.handlePosChange(value)}
        >
          SkipBack
        </button>

        <button onClick={this.handleTogglePlay}>PLAY</button>

        <button
          value={this.state.pos + 5}
          onClick={value => this.handlePosChange(value)}
        >
          SkipForward
        </button>

        <h4>{this.props.pos}</h4>
        <div className="form-group col-xs-4">
          <label htmlFor="simple-pos">Position:</label>
          <input
            name="simple-pos"
            type="number"
            step="0.01"
            value={this.state.pos}
            onChange={this.handlePosChange}
            className="form-control"
          />
        </div>

        <div>
          <header className="App-header">Notes</header>
          {notes.map(notes => (
            <button
              className="yay2"
              value={this.state.pos + notes.time}
              onClick={value => this.handlePosChange(value)}
            >
              <h3>
                Time : {notes.timecode} - Description : {notes.description}
              </h3>
            </button>
          ))}
        </div>
      </div>
    );
  }
}

笔记的格式如下：

  notes:[
    {
      timecode: "1:00",
      time: 60,
      description: "Note 1"
    },
    {
      timecode: "2:00",
      time: 120,
      description: "Note 2"
    },
  ]

Answer 1

<button>是一个HTML元素，它对react-wavesurfer一无所知，当您点击它时，事件就是DOM事件并且有originalArgs信息。

此外，button value没有传递event.target（有关解释，请参阅https://stackoverflow.com/a/45882908/669586）。

点击以下按钮会发生什么：

<button
   className="yay2"
   value={this.state.pos + notes.time}
   onClick={event => this.handlePosChange(event)}
>

是event传递给handlePosChange处理程序：

pos: e.originalArgs ? e.originalArgs[0] : +e.target.value

由于事件没有originalArgs，因此执行+e.target.value。但是，value为undefined，因此会发生以下情况：

pos: +undefined

且+undefined为NaN。

修复它：

更改handlePosChange的工作方式：

handlePosChange(newPos) {
  this.setState({
    pos: newPos
  });
}

更新元素：

<Wavesurfer
   ...
   onPosChange={event => this.handlePosChange(event.originalArgs[0])}
/>

<input
  ...
  value={this.state.pos}
  onChange={event => this.handlePosChange(+event.target.value)}
/>

<button
  ...
  onClick={() => this.handlePosChange(this.state.pos + notes.time)}
>

为什么我的反应应用程序出现NaN错误？

1 个答案: