问当道具通过两个组件时，我失去了在数组上使用.map的能力。
EN

Stack Overflow用户

提问于 2018-09-17 20:01:41

回答 4查看 75关注 0票数 0

以下是状态集： 待通过的状态

，我在SearchResults组件中传递它：

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

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

，然后在SearchResults中，我把道具传递给

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中，我尝试在数组上使用映射，但是我得到了一个错误，它不能在未定义的.上执行映射。

class TrackList extends React.Component {


    render() {


        return (<div className="TrackList">

                {

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


}

当我调用第一个组件中的道具时，它是定义的，我可以按需要使用数组，但是当传递到第二个组件时，它会在控制台中显示未定义，我不能使用map。有人知道为什么会这样吗？

javascript

arrays

reactjs

components

react-props

回答 4

Stack Overflow用户

发布于 2018-09-18 17:22:12

所以问题是，我把道具从另一个有错误的组件中传递给了同一个组件。我已经忘记了，我是从多个来源传递道具的，这就是为什么我会得到未定义的错误。谢谢大家的帮助。

票数 1

Stack Overflow用户

发布于 2018-09-17 20:14:03

您是否通过外部加载该数据，如果是，您的状态是否有默认值？如果没有将searchResults设置为空数组，那么最初您将没有searchResults的值。

如果不是这样的话，一定有我们在这里缺少的程序的一部分，因为代码看起来很好。

尝试记录每个组件的整个道具的每一步，你会得到一个更好的想法，什么时候丢失。

票数 0

Stack Overflow用户

发布于 2018-09-17 21:05:01

这是您面临的一个有趣的问题，但我建议您首先检查this.props.tracks是否为null || undefined，然后再进行映射。

如果我的假设是正确的，那么当TrackList组件的呈现方法最初运行时，this.props.tracks是未定义的，因此它可能会抛出一个错误。

以下代码可能解决您的问题：

class TrackList extends React.Component {
    render() {
       return(
          const { tracks } = this.props;
          <div className="TrackList">
            {tracks ? tracks.map(track => {
            return <Track track={track} />;
            }) : null}
          </div>
        );
     }
}