如何使用 redux 选择列表项？答案

【问题标题】：How to select list item using redux?如何使用 redux 选择列表项？
【发布时间】：2018-12-18 16:32:26
【问题描述】：

我正在尝试从播放列表中选择一首歌曲，但选择不起作用，因为当我第一次单击时它返回“null”，当我第二次单击它选择一个项目时，但由于某种原因，当我不断点击不同的项目时，我总是得到一个以前的项目值，我不知道为什么。

//Here is my action from redux:

import {FETCH_PLAYLIST_SUCCESS, FETCH_PLAYLIST_FAILURE, FETCH_PLAYLIST_REQUEST, SELECT_TRACK} from './types'
import {PREV, PLAY, PAUSE, NEXT, TOGGLE_TRACK} from './types';
import axios from "axios/index";

export const getPlayList = id => {
  return function (dispatch) {
    dispatch({type: FETCH_PLAYLIST_REQUEST});
    axios.get('https://cors-anywhere.herokuapp.com/https://api.deezer.com/search/track?q=red+hot+chili+peppers').then(response => {
      dispatch({
        type: FETCH_PLAYLIST_SUCCESS,
        payload: {
          playlist: response.data.data,
          currentTrack: response.data.data[0]
        }
      });
    }).catch(err => {
      dispatch({
        type: FETCH_PLAYLIST_FAILURE,
        payload: err,
      });
    })
  }
};

//func which takes index of list item
export  const selectTrack = (i) =>{
  return function (dispatch) {
    dispatch({
      type: SELECT_TRACK,
      payload: i
    });
  }
}

//reducer
 case SELECT_TRACK:
      return {
        ...state,
        selectedTrack: state.playList[action.payload],
      };

//click handler in container component
 handleClick = (index) => {
    this.props.selectTrack(index);
    console.log(this.props.playlist.selectedTrack);
    console.log(index);
  };

//how I'm using it in playlist component
<Playlist handleClick={this.handleClick} tracks={this.props.playlist.playList}/>

//Playlist component 
function PlayList(props) {
  const {i,handleClick,currentSongIndex,tracks,isSelected,} = props;
  return (
    <div className="playlist-container">
      <div className="playlist">
        <ul>
          {
            tracks.map((track, index) => (
              <Track
                isSelected={isSelected}
                index={index}
                key={track.id}
                id={track.id}
                title_short={track.title}
                duration={track.duration}
                clickHandler={ () => handleClick(index)}
              />
            ))
          }
        </ul>
      </div>
    </div>
  );
}

在屏幕截图上查看它的工作原理

【问题讨论】：

标签： javascript reactjs ecmascript-6 redux

【解决方案1】：

单击项目时，您将在容器的单击处理程序中调度操作。 console.log 时 handler 中的 props 仍然是旧的 props。只有当 redux 更新状态并且组件通过 react 生命周期方法更新其 props 时，新的 props 才会到达。

我猜你没有在 reducer 中设置任何初始状态，这可能是第一个值为 null 的原因。

尝试在渲染方法中添加相同的语句：console.log(this.props.playlist.selectedTrack)。您应该会看到更新后的道具

【讨论】：

感谢您的回复！我将console.log(this.props.playlist.selectedTrack) 放入render 方法中，它更新了应有的值

【解决方案2】：

@Easwar 是正确的（以上）你的调试逻辑有问题。

关于核心问题，我没有看到你的一些重要道具是在哪里传递的。你有：

const {i,handleClick,currentSongIndex,tracks,isSelected,} = props;

在您的 PlayList 组件中，但您正在像这样调用它：

<Playlist handleClick={this.handleClick} tracks={this.props.playlist.playList}/>

currentSongIndex 和 isSelected 在哪里传入？你的麻烦可能就在那里。看起来他们将在 <Playlist> 的渲染方法中评估为 null。

【讨论】：

感谢您的回复！我会记下你的评论！