2

更新的代码仍然不起作用

无法在这里找到答案来帮助解决我的问题。

在我的播放列表组件中，我有一个链接到轨道新路径的图像。我想将播放列表 ID 传递给曲目，以便它可以根据给定的 ID 显示曲目，但无论如何我都不会这样做。

我的播放列表组件返回：

 <Link to = '/tracks' state = {{playlist:playlist.id}}>
   <img alt = "album"src={playlist.images.url}/>
 </Link>

在我的 Track 组件中，它执行以下操作：

export default class Tracks extends React.Component {
    constructor() {
        super();
        this.state = {
            playlistid: 0
        };
    }
        componentDidMount() {
            this.setState({
                playlistid: this.props.location.state.playlistid
            });
    }
    render() {
        return (
            <div>
                <p>PlaylistID: {this.state.playlistid}</p>
            </div>
        );
    }
}

谁能告诉我哪个组件错了？抱歉，我对 React 还是很陌生

谢谢

4

2 回答 2

2

为了让您将状态从 Reach 路由器传递给 Link 组件，您可以将状态作为单独的道具传递。to道具需要是一个字符串

<Link
     to='/tracks'
     state= {{
        playlistid: playlist.id
     }}
 >
     <img alt = "album"src={image.url}/>
 </Link>

有关更多信息，请参阅来自 Reach-router 的链接的文档

编辑：

您实现 Link 组件的方式适用于 react-routerLink组件

于 2020-04-23T17:36:50.773 回答
0

你可以试试这个：

<Link to={{
        pathname: `/tracks/${playlist.id}`, //I assume you tracked the tracklist state here as a props 
      }}>
   <img alt = "album"src={image.url}/>
</Link>
于 2020-04-23T17:36:50.863 回答