将数据作为道具传递给来自另一个州的一个组件

Question

我有两个组成部分：专辑和歌曲。 我正在尝试将专辑组件的id作为prop传递给Song组件，而不必像这样呈现Song组件：

<Songs albumId={this.state.id} />

我认为可行的一种可行解决方案是，首先在歌曲的Album组件中定义一个状态属性：

this.state({id: '', songComponent: <Songs />})

代码中的其他地方抓住albumId并更新状态，如：

this.setState({id: this.state.id, songComponent: <Songs albumId={this.state.id} />

然后在歌曲组件中收到this.props.albumId

的ID

我尝试过这种方式但this.props.albumId一直在undefined。任何解决方案？

Answer 1

基本上你是对组件构成的误解。 在试图解密你的问题时，我来到了这个：

1. 相册ID和歌曲ID已连接到相册
2. 您不仅需要在相册中显示歌曲，还要在相册之外显示，并在其上存储一些参考。

如果我是正确的，那么我可以建议你使用商店（无论你使用什么，还原，等等），并从那里收集专辑ID（例如 @JulienD 评论）。

并且不要将整个组件传递给this.setState。状态应该只包含表示UI状态所需的最少量数据。它不应包含计算数据，其他React组件或来自props的重复数据。