Question

我要将选定的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;

Full source code here!

我不知道怎么了，因为我不太了解。

反应返回空参数

0 个答案: