反应函数返回未定义

Posted 2023-02-14

【中文标题】反应函数返回未定义

【英文标题】：React function returns undefined

【发布时间】：2018-02-21 17:36:26

【问题描述】：

我大约有两周的时间来学习 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>
    );
  

【问题讨论】：

哪个函数给出未定义？

@VikramSaini “我的另一个问题是 songBuilder() 返回未定义”

songBuilder() 被调用到嵌套在

中的底部

使用this.songBuilder()而不是songBuilder()来引用你的类的成员函数。

【参考方案1】：

尝试将此方法称为

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

最初你把你的方法称为

songBuilder()--返回“未定义”，因为 this 指向窗口

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

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

【讨论】：

尝试将您的方法称为 this.songBuilder

我已经更新了答案，src 问题是什么？

我编辑了我的原始帖子，以便更清楚地描述我的问题。第二段应该有望澄清我的问题。谢谢你的澄清。既然 songBuilder 是在一个类中定义的，为什么它的作用域是窗口 obj 而不是包含在类中？

使用console.log类型和计数做一些调试并检查是否有任何不一致

因为它被渲染到窗口范围内并存在于那里？这对我来说都是新的。感谢您的许多回答。