反应状态值未定义

Question

我正在构建一个音乐播放器应用程序，我有一个函数从组件状态的对象中获取一个值。当我将该值赋予函数时，它会打印 undefined 而不是值本身，因此该函数无法使用未定义的值。这是我打印状态时 firstSong 组件的样子：{    Title: "One Dance",    Artist: "Drake",    Length: "4:03",    Path:      "/home/songs/Drake - One Dance ft. EMØ.mp3"  }这是完整的组件代码：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();    this.state = {      firstSong: this.getFirstSong(firstSongApi),      isPlaying: false    };  }  getFirstSong = async firstSongApi => {    const request = await axios({      method: "get",      url: firstSongApi,      headers: {}    });    try {      let firstSong = request.data.firstSong;      this.setState({        firstSong: firstSong      });    } catch (error) {      console.error(error);    }  };  playOrPauseSong = path => {    console.log(path);  };  render() {    {      this.playOrPauseSong(this.state.firstSong.path);    }    return (      <CardStyling className="card">        <div className="card-body">          <h3 id="song-header">{this.state.firstSong.Title}</h3>          <h5 id="artist">By: {this.state.firstSong.Artist}</h5>          <h5 id="Time">{this.state.firstSong.Length}</h5>          <button type="button" id="back-btn" className="btn">            <FontAwesomeIcon icon={faBackward} />          </button>          <button            type="button"            id="play-btn"            className="btn"我希望该函数能够获取真实的路径值而不是未定义的，提前谢谢！

Answer 1

确保您的状态如下所示，并且路径将正确记录在 playOrPauseSong 中；

    this.state = {

      firstSong: {

        title: "One Dance",

        artist: "Drake",

        length: "4:03",

        path:

          "/home/songs/Drake - One Dance ft. EMØ.mp3"

      }

    }

  playOrPauseSong = path => {

    console.log(path)

  }

  render(){

    return(

      <div>

        {this.playOrPauseSong(this.state.firstSong.path)}

      </div>

    )

  }

Answer 2

render() {

    {

      this.playOrPauseSong(this.state.firstSong.path);

    }

...

未定义的原因是您firstSong仍在接受网络请求，即async方法，因此不会有任何firstSong或firstSong.path，因此它是undefined. 因此，您可以更新为以下内容

render() {

    {

      this.state.firstSong.path && this.playOrPauseSong(this.state.firstSong.path);

    }

所以它的作用是，当没有时path，不会调用该方法，并且会在网络调用返回结果时调用它，但实际上，您应该引入另一个标志来跳过调用，this.playOrPauseSong因为您的组件将被保留重新渲染，您不会希望每次重新渲染时都继续调用它

更新：

让我们稍微重组一下

我们可以使firstSongas的初始状态null并单独调用 getFirstSong，因此您的构造函数应如下所示

constructor() {

  super();

  this.state = {

    firstSong: null,

    isPlaying: false

  };

  this.getFirstSong(firstSongApi);

}

然后对于您的render方法，您将进行检查，firstSong因为在初始加载时，firstSong 将为空，因此更新到以下内容

render() {

    {

      this.state.firstSong && this.playOrPauseSong(this.state.firstSong.path);

    }