反应状态值未定义

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 中；&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; firstSong: {&nbsp; &nbsp; &nbsp; &nbsp; title: "One Dance",&nbsp; &nbsp; &nbsp; &nbsp; artist: "Drake",&nbsp; &nbsp; &nbsp; &nbsp; length: "4:03",&nbsp; &nbsp; &nbsp; &nbsp; path:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "/home/songs/Drake - One Dance ft. EMØ.mp3"&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; playOrPauseSong = path => {&nbsp; &nbsp; console.log(path)&nbsp; }&nbsp; render(){&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; {this.playOrPauseSong(this.state.firstSong.path)}&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; )&nbsp; }

Answer 2

render() {&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; this.playOrPauseSong(this.state.firstSong.path);&nbsp; &nbsp; }...未定义的原因是您firstSong仍在接受网络请求，即async方法，因此不会有任何firstSong或firstSong.path，因此它是undefined. 因此，您可以更新为以下内容render() {&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; this.state.firstSong.path && this.playOrPauseSong(this.state.firstSong.path);&nbsp; &nbsp; }所以它的作用是，当没有时path，不会调用该方法，并且会在网络调用返回结果时调用它，但实际上，您应该引入另一个标志来跳过调用，this.playOrPauseSong因为您的组件将被保留重新渲染，您不会希望每次重新渲染时都继续调用它更新：让我们稍微重组一下我们可以使firstSongas的初始状态null并单独调用 getFirstSong，因此您的构造函数应如下所示constructor() {&nbsp; super();&nbsp; this.state = {&nbsp; &nbsp; firstSong: null,&nbsp; &nbsp; isPlaying: false&nbsp; };&nbsp; this.getFirstSong(firstSongApi);}然后对于您的render方法，您将进行检查，firstSong因为在初始加载时，firstSong 将为空，因此更新到以下内容render() {&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; this.state.firstSong && this.playOrPauseSong(this.state.firstSong.path);&nbsp; &nbsp; }