将道具传递给兄弟姐妹reactJS时未定义

Posted 2023-02-23

【中文标题】将道具传递给兄弟姐妹reactJS时未定义

【英文标题】：Undefined when passing props to siblings reactJS

【发布时间】：2019-05-07 16:34:50

【问题描述】：

新的 react 并试图传递，props 到带有 react 的组件。但在 Track.js 中接收 this.props.name 时会得到 undefined 结果。和TypeError: Cannot read property 'name' of undefined 在 Track.js 渲染方法中尝试使用 this.props.track.name 时。

它应该渲染这些轨道：

            tracks: [
                name: 'Gold Slug',
                artist: 'DJ khaled',
                album: 'We da best',
                id: '102 sample ID'
            ,
                
                    name: 'Slim shady',
                    artist: 'Eminem',
                    album: 'Marshal materials',
                    id: '103 sample ID'
                

或者这条赛道：

        searchResults: [
            name: 'You Mine',
            artist: 'DJ Khaled',
            album: 'I Changed a Lot',
            id: '101 sample ID'
        ],

背景信息：构建一个应用程序来呈现带有名称、艺术家和专辑的歌曲曲目。还有搜索结果和播放列表的搜索。我正在使用 6 个组件：App、PlayList、SearchBar、SearchResults、Track 和 TrackList。

App 是一个容器。 PlayList 允许用户向其中添加曲目。 SearchResults 显示来自 SearchBar 的结果。

在 App.js 中，我在构造方法中设置了 searchResults 的状态并将其传递给组件。

App.js：

import React from 'react';
import './App.css';
import SearchBar from '../SearchBar/SearchBar'
import SearchResults from "../SearchResults/SearchResults";
import Playlist from "../Playlist/Playlist";    

class App extends React.Component 
    constructor(props) 
        super(props);
        this.state = 
            searchResults: [
                name: 'You Mine',
                artist: 'DJ Khaled',
                album: 'I Changed a Lot',
                id: '101 sample ID'
            ],
            tracks: [
                name: 'Gold Slug',
                artist: 'DJ khaled',
                album: 'We da best',
                id: '102 sample ID'
            ,
                
                    name: 'Slim shady',
                    artist: 'Eminem',
                    album: 'Marshal materials',
                    id: '103 sample ID'
                
            ]
        ;
    

    render() 
    return (
        <div>
            <h1>Ja<span className="highlight">mmm</span>ing</h1>
            <div className="App">
                <SearchBar />
                <div className="App-playlist">
                    <SearchResults searchResults=this.state.searchResults/>
                    <Playlist />
                </div>
            </div>
        </div>
    );
  


export default App;

SearchResults 接收并 .map 遍历数组，并将其设置为 render 方法中 TrackList 组件内的轨道。

SearchResults.js：

import React from 'react';
import './SearchResults.css'
import TrackList from "../TrackList/TrackList";
import Track from "../Track/Track";

class SearchResults extends React.Component 
    render() 
        return (
            //Adds a map method that renders a set of Track components on the tracks attribute.
            <div className="SearchResults">
                <h2>Results</h2>
                <TrackList tracks=this.props.searchResults.map(track => 
                    return <Track key=track.id /> 
                ) />
            </div>
        )
    


export default SearchResults;

TrackList.js 渲染一组轨道组件：

import React from 'react';
import './TrackList.css'
import Track from '../Track/Track'

class TrackList extends React.Component 
    render() 
        return (

            <div className="TrackList">
                <Track />
                <Track />
                <Track />
                <Track />
            </div>
        )
    



export default TrackList;

Track.js 渲染轨道：

import React from 'react';
import './Track.css'

class Track extends React.Component 

    renderAction() 
        if (this.props.isRemoval == true) 
            return <h1>-</h1>;
         else 
            return <h1>+</h1>;
        
       

    //TODO: Fix rendering method on this.props.track.name
    render() 
        return (
            <div className="Track">
                <div className="Track-information">
                    <h3>this.props.name</h3>
                    <p>`$this.props.artist | $this.props.album`</p>
                </div>
                <a className="Track-action" isRemoval=true></a>
            </div>
        )
    


export default Track;

【问题讨论】：

您没有将任何道具传递给<Track> 组件

【参考方案1】：

这里的问题是您实际上并没有将数据向下传递给Track 组件。

class SearchResults extends React.Component 
    render() 
        return (
            //Adds a map method that renders a set of Track components on the tracks attribute.
            <div className="SearchResults">
                <h2>Results</h2>
                <TrackList tracks=this.props.searchResults.map(track => 
                    return <Track key=track.id /> 
                ) />
            </div>
        )
    

似乎SearchResults 正在尝试映射通过道具获取的数据，并为每个数据渲染一个Track。现在，如果您在此处查看此行，您会注意到实际上没有传递任何数据。

return <Track key=track.id />

我认为要解决您的问题，您需要做的就是这个。

class SearchResults extends React.Component 
    render() 
        return (
            //Adds a map method that renders a set of Track components on the tracks attribute.
            <div className="SearchResults">
                <h2>Results</h2>
                <TrackList tracks=this.props.searchResults.map(track => 
                    return <Track key=track.id track=track /> 
                ) />
            </div>
        )
    

现在您可以在Track 组件中访问this.props.track.whatever。