React 数据显示在 console.log 中，但在尝试渲染时告诉我它未定义

Question

这是我得到的错误

TypeError: Cannot read property 'name' of undefined
LibrarySong
C:/Users/Vimalan/Desktop/React-Course/ChapterTwo/reactprayer2/src/components/LibrarySong.js:5
  2 | //This file just display song title, picture, mp3 file
  3 | 
  4 | const LibrarySong = ({ song }) => {
> 5 |     console.log(song.name)
  6 |     return (
  7 |         <div>
  8 |         <h1>{song.name}</h1>
View compiled
▶ 21 stack frames were collapsed.

所以它应该做的是从 Library.js 将通过歌曲进行映射，然后将其作为道具传递到 Librar.js 组件中，但由于某种原因，当我尝试显示将其命名为无法读取其属性。我什至控制台记录它并通过那里显示

控制台输出：

LibrarySong.js:5 Beaver Creek
LibrarySong.js:5 Daylight
LibrarySong.js:5 Keep Going
LibrarySong.js:5 Nightfall
LibrarySong.js:5 Reflection
LibrarySong.js:5 Under the City Stars
LibrarySong.js:5 Uncaught 

TypeError: Cannot read property 'name' of undefined
    at LibrarySong (LibrarySong.js:5)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at flushSync (react-dom.development.js:22467)
    at Object.scheduleRoot (react-dom.development.js:24444)
    at react-refresh-runtime.development.js:284
    at Set.forEach (<anonymous>)
    at Object.performReactRefresh (react-refresh-runtime.development.js:263)
    at RefreshUtils.js:62

这是我的 Library.js

import React from "react";
import LibrarySong from "./LibrarySong";

const Library = ({ songs }) => {
  return (
    <div className="library">
      <h2>Library</h2>
      <div className="library-songs">
        {songs.map((song) => 
          <LibrarySong  id ={song.id} key={song.id} song={song} />
        )}
        <LibrarySong />
      </div>
    </div>
  );
};

export default Library;

和LibrarySongs.js

    import React from "react";
//This file just display song title, picture, mp3 file

const LibrarySong = ({ song }) => {
    console.log(song.name)
    return (
        <div>
          <img alt={song.name} src={song.cover}/>
          <div className="song-description">
            <h3>{song.name}</h3>
            <h4>{song.artist}</h4>
          </div>
        </div>
      );
    };


export default LibrarySong;

和我的App.js

import React, { useState } from "react";
import Player from "./components/Player";
import Song from "./components/Song";
import "./styles/app.scss";
import data from "./data";
import Library from "./components/Library";

function App() {
  //State
  const [songs, setSongs] = useState(data()); //grabs all songs
  const [currentSong, setCurrentSong] = useState(songs[0]); // get current song
  const [isPlaying, setIsPlaying] = useState(false); // check to see if song is playing or paused
  return (
    <div className="App">
      <Song currentSong={currentSong} />
      <Player
        currentSong={currentSong}
        isPlaying={isPlaying}
        setIsPlaying={setIsPlaying}
      />
      <Library songs={songs}/>
    </div>
  );
}

export default App;

Answer 1

您的 LibrarySong 组件需要一个名为 song:

的道具

const LibrarySong = ({ song }) => {

但是 Library 组件正在使用 LibrarySong 而没有传递 any 道具：

<LibrarySong />

这可能是一个拼写错误，您可能只想删除它。

React 数据显示在 console.log 中，但在尝试渲染时告诉我它未定义

React data shows in console.log but tells me its undefined when trying to render

reactjs

react-props

use-state