javascript - 当通过 2 个组件传递 props 时，我失去了在数组上使用 .map 的能力

Question

以下是状态集: State to be passed

我在 SearchResults 组件中传递的内容:

SearchResults isRemoval='false' onAdd={this.addTrack} searchResults={this.state.searchResults}/>

(我知道开头缺少 < 符号，我不得不将其省略，因为它用 < 未省略来隐藏它)

然后在 SearchResults 中我将 props 传递给

class SearchResults extends React.Component {

    render() {

        return (
            <div className="SearchResults">
                <h2>Results</h2>

                <TrackList isRemoval={this.props.isRemoval} onAdd={this.props.onAdd}
                           tracks={this.props.searchResults}/>
            </div>
        )
    }

}

然后在 Tracklist 中，我尝试在数组上使用 map ，但收到一条错误消息，指出它无法在未定义的情况下执行 map 。

class TrackList extends React.Component {


    render() {


        return (<div className="TrackList">

                {

                this.props.tracks.map(track => {
                return <Track  track={track} />
                })
                }
            </div>
        );
    }


}

当我向下调用第一个组件中的 props 时，它已被定义，我可以根据需要使用该数组，但当传递到第二个组件时，它在控制台中显示为未定义，并且我无法使用 map 。有谁知道为什么会发生这种情况吗？

Answer 1

所以问题是我将 props 从另一个有错误的组件传递给同一个组件。我忘记了我正在从多个来源传递 Prop ，这就是为什么我收到未定义的错误。感谢大家的帮助。