我要将选定的album_title
值发送到localhost:4000/api/albums/{album_title}
但是它返回空值,而不是我选择的值(album_title
)
我如何返回专辑标题?
AlbumListPage.js
const AlbumListPage = ({ match }) => {
const { album_title } = match.params;
return(
<PageTemplate>
<ListWrapper>
<LeftList/>
<AlbumListContainer
album_title = {album_title}
/>
<h1>aaaaaaa</h1>
<h1>{album_title}</h1>
</ListWrapper>
</PageTemplate>
);
};
此<h1>{album_title}</h1>
返回空
AlbumListContainer.js
class AlbumListContainer extends Component {
getAlbumList = () => {
const { album_title, ListActions } = this.props;
ListActions.getAlbumList({
album_title
});
}
componentDidMount() {
this.getAlbumList();
}
componentDidUpdate(prevProps, prevState) {
if(prevProps.album_title !== this.props.album_title) {
console.log('albumlistcontainer');
this.getAlbumList();
document.documentElement.scrollTop = 0;
}
}
render() {
const { loading, albums, album_title } = this.props;
if(loading) return null;
return (
<div>
<AlbumList albums={albums} album_title={album_title}/>
</div>
);
}
}
export default connect(
(state) => ({
albums: state.list.get('albums'),
loading: state.pender.pending['list/GET_ALBUM_LIST']
}),
(dispatch) => ({
ListActions: bindActionCreators(listActions, dispatch)
})
)(AlbumListContainer);
AlbumList.js
const AlbumItem = ({title, body, album_title, num, _id}) => {
return (
<div className={cx('album-item')}>
<h1><Link key={_id} to={`/album/${album_title}`}>{num}. {title}</Link></h1>
<h5>{album_title}</h5>
<div className={cx('album_title')}></div>
<p>{removeMd(body)}</p>
</div>
)
}
const AlbumList = ({albums}) => {
const albumList = albums.map(
(album) => {
const {title, body, album_title, num, _id } = album.toJS();
return (
<AlbumItem
title={title}
body={body}
album_title={album_title}
num={num}
key={_id}
id={album_title}
/>
)
}
);
return (
<div className={cx('album-list')}>
{albumList}
</div>
);
};
export default AlbumList;
我不知道怎么了,因为我不太了解。