Question

我花了两周时间研究React并开始研究我的第一个SPA。我很喜欢做出反应并且能够弄清楚我的许多问题，但是我在这个MusicPlayer组件上遇到了两个问题。

一个是当我在我的html音频元素中更改src时，即使src路径确实发生了变化，实际的音频也不会改变。我可以在开发工具中看到它发生。单击按钮时我可以看到src更改，但正在播放的音频没有变化。如果音轨完成，则不会加载下一首曲目。无论src是什么，我听到的音频总是跟踪1。

我的另一个问题是songBuilder（）返回undefined。虽然我必须在那里，但我的语法中找不到任何错误。我使用create-react-app作为我的样板，因为我还没有理解webpack。我的地图问题是我的JS理解中的缺陷还是捆绑/构建发生了奇怪的事情？如果需要更多信息来回答这个问题，请告诉我。谢谢！

import React, { Component } from "react";

const songRepo = [
  {
    title: "The Silver Swan",
    songLength: "0:13",
    path: require("./songs/thesilverswan.mp3")
  },
  {
    title: "Miracle Cure",
    songLength: "0:12",
    path: require("./songs/miraclecure.mp3")
  },
  {
    title: "Miracle Cure",
    songLength: "0:12",
    path: require("./songs/miraclecure.mp3")
  },
  {
    title: "Miracle Cure",
    songLength: "0:12",
    path: require("./songs/miraclecure.mp3")
  }
];

export default class MusicPlayer extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  songBuilder() {
    return songRepo.map((song, index) => (
      <li
        className={index % 2 === 0 ? "even song_wrapper" : "odd song_wrapper"}
      >
        <span className="song_number"> {index + 1}</span>
        <span key={index + 1} className="song_title">
          {song.title}
        </span>
        <span className="song_length">{song.songLength}</span>
      </li>
    ));
  }

  playerClick(type) {
    if (type === "next_song" && this.state.count < songRepo.length - 1) {
      this.setState({ count: this.state.count + 1 });
    } else if (type === "prev_song" && this.state.count > 0) {
      this.setState({ count: this.state.count - 1 });
    }
  }

  render() {
    return (
      <div className="player">
        <div className="player_nav">
          <div className="player_title">
            <span className="song_number">{this.state.count + 1}</span>
            <span className="song_title">
              {songRepo[this.state.count].title}
            </span>
            <span className="song_length">
              {songRepo[this.state.count].songLength}
            </span>
          </div>
          <audio className="waveform" controls="controls">
            <source src={songRepo[this.state.count].path} type="audio/mp3" />
          </audio>
          <div className="player_buttons">
            <span
              className="prev_song"
              onClick={this.playerClick.bind(this, "prev_song")}
            >
              &lsaquo;&lsaquo;
            </span>
            <span> </span>
            <span
              className="next_song"
              onClick={this.playerClick.bind(this, "next_song")}
            >
              &rsaquo;&rsaquo;
            </span>
          </div>
          <div>
            <ul className="song_list">{songBuilder()}</ul>
          </div>
        </div>
      </div>
    );
  }
}

Answer 1

尝试将此方法称为

<ul className="song_list">{this.songBuilder}</ul>

最初您将方法称为

songBuilder（） - 返回＆＃34; undefined＆＃34;因为这指向窗口

this.songBuilder - 作为此点的当前对象

如果您的函数是在对象中定义的，则直接从对象调用它将其上下文设置为调用该函数的对象。

React函数返回undefined

1 个答案: