反应函数返回未定义

Question

我大约有两周的时间来学习 React 并致力于我的第一个 SPA。我喜欢 react 并且能够解决我的许多问题，但是我在制作的这个 MusicPlayer 组件上遇到了两个问题。

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

我的另一个问题是 songBuilder() 返回未定义。尽管它们必须存在，但我在我的语法中找不到任何错误。我使用 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()--返回“未定义”，因为 this 指向窗口

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

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