咱们来一步步拆解你遇到的问题，主要是异步数据加载时机、初始State设置，还有属性名大小写匹配这几个点出了问题：

问题根源分析 #

1. 初始State赋值错误：
   你在constructor里直接把this.getFirstSong()的结果赋值给firstSong，但getFirstSong是异步函数，它返回的是一个Promise，不是实际的歌曲数据。这导致组件初始化时this.state.firstSong根本不是你期望的对象。

2. 异步数据加载时机不对：
   React组件里的异步数据请求，标准做法是放在componentDidMount生命周期钩子中，而不是constructor里。这样能确保组件挂载完成后再发起请求，避免数据还没返回就渲染组件。

3. 属性名大小写不匹配：
   你打印的歌曲数据里路径属性是Path（大写P），但代码里你用的是this.state.firstSong.path（小写p），这肯定会取到undefined！

4. Render中不必要的函数调用：
   你在render方法里直接调用this.playOrPauseSong(this.state.firstSong.path)，这会导致每次组件渲染都执行这个函数，而且数据还没加载完成时，直接访问path会报错。

修正后的完整代码 #

import React, { Component } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBackward, faPlay, faForward, faStop } from "@fortawesome/free-solid-svg-icons";
import styled from "styled-components";
import axios from "axios";

const CardStyling = styled.div`
  .card-body {
    width: 100%;
  }
  #song-header {
    margin-bottom: 25px;
  }
  #artist {
    margin-bottom: 25px;
  }
  #time {
    margin-bottom: 25px;
  }
`;

let display = "none";
const firstSongApi = "http://localhost:4001/getFirstSong";
const playSongApi = "http://localhost:4001/playSong";

export default class SongInfo extends Component {
  constructor() {
    super();
    // 初始State设为空对象，避免渲染时访问属性报错
    this.state = {
      firstSong: {},
      isPlaying: false
    };
  }

  // 组件挂载后再发起数据请求
  componentDidMount() {
    this.getFirstSong(firstSongApi);
  }

  getFirstSong = async (firstSongApi) => {
    try {
      const request = await axios({
        method: "get",
        url: firstSongApi,
        headers: {}
      });
      const firstSong = request.data.firstSong;
      this.setState({ firstSong });
      // 如果需要数据加载完成后自动播放，可在这里调用playOrPauseSong
      // this.playOrPauseSong(firstSong.Path);
    } catch (error) {
      console.error("获取歌曲数据失败：", error);
    }
  };

  playOrPauseSong = (path) => {
    console.log("当前播放路径：", path);
    // 这里可以添加播放/暂停的业务逻辑
  };

  render() {
    const { firstSong } = this.state;
    
    // 数据未加载完成时显示加载提示
    if (!firstSong.Title) {
      return <div>加载中...</div>;
    }

    return (
      <CardStyling className="card">
        <div className="card-body">
          <h3 id="song-header">{firstSong.Title}</h3>
          <h5 id="artist">By: {firstSong.Artist}</h5>
          <h5 id="Time">{firstSong.Length}</h5>
          <button type="button" id="back-btn" className="btn">
            <FontAwesomeIcon icon={faBackward} />
          </button>
          <button
            type="button"
            id="play-btn"
            className="btn"
            // 注意这里用的是和API返回一致的Path（大写P）
            onClick={() => this.playOrPauseSong(firstSong.Path)}
          >
            <FontAwesomeIcon icon={faPlay} />
          </button>
          <button
            type="button"
            id="stop-btn"
            className="btn"
            style={{ display: display }}
          >
            <FontAwesomeIcon icon={faStop} />
          </button>
          <button type="button" id="next-btn" className="btn">
            <FontAwesomeIcon icon={faForward} />
          </button>
        </div>
      </CardStyling>
    );
  }
}

关键修改点说明 #

1. 初始State优化：把firstSong初始化为空对象，避免数据未加载时访问属性直接抛出错误。
2. 数据请求时机调整：将getFirstSong的调用移到componentDidMount，符合React组件数据加载的最佳实践。
3. 属性名修正：所有访问路径的地方都改成firstSong.Path，和API返回的键名保持一致。
4. Render逻辑优化：添加了数据加载状态的判断，避免白屏或报错；移除了render中不必要的playOrPauseSong调用，改为点击播放按钮时才触发。
5. 错误处理增强：完善了请求失败时的错误提示，方便排查问题。

内容的提问来源于stack exchange，提问作者nadav atar