Question

我正在尝试从播放列表中选择一首歌曲，但是选择无法正常工作，因为，当我第一次单击时，当第二次单击时，它会返回“ 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>
  );
}

查看其在屏幕截图上的工作方式

Answer 1

在单击项目时，您正在容器的单击处理程序中分派操作。 console.log时处理程序中的道具仍然是旧的道具。仅在redux更新状态和组件通过react生命周期方法更新其prop之后，新的prop才会到来。

我猜您尚未在化简器中设置任何初始状态，这可能是第一个值变为null的原因。

尝试在render方法中添加相同的语句：document.body.style.overflow = "hidden"; //the key strokes for the up and down keys // Set up our container const el = document.querySelector("#theMiddle"); // Create new SlotMachine const slot = new SlotMachine(el, {}); document.onkeydown = checkKey; function checkKey(e) { e = e || window.event; //Secret Code: EADWEARD anime({ targets: "div.right", translateX: { value: 200, duration: 500 } }); anime({ targets: "div.left", translateX: { value: -200, duration: 500 } }); if (e.keyCode == "40") { //this is down //this will open it up slot.prev(); } else if (e.keyCode == "38") { slot.next(); } } //Scroll detection occurs here, without the scrollbar $("html").on("mousewheel", function(e) { anime({ targets: "div.right", translateX: { value: 200, duration: 500 } }); anime({ targets: "div.left", translateX: { value: -200, duration: 500 } }); var delta = e.originalEvent.wheelDelta; if (delta < 0) { //This is for the scrolling down // animation opens up the brakets slot.prev(); }if (delta > 0) { slot.next(); } }); //this is for detecting clicks for the divs in the middle div // 1 = the 2nd image , 2 = the 3rd image $(".middle div").click(function(){ if($(this).index() == '1'){ // The change occurs here console.log("the fucks"); document.getElementById("aboutID").innerHTML = "Hello World"; }if($(this).index() == '2'){ // The change occurs here console.log("jobs page"); } });。您应该会看到更新的道具

Answer 2

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

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

PlayList

在您的<Playlist handleClick={this.handleClick} tracks={this.props.playlist.playList}/>组件中，但是您正在这样调用它：

currentSongIndex

isSelected和null传递到哪里？您的麻烦很可能在那里。看起来他们将在<Playlist>的render方法中求值为class Order < ApplicationRecord has_many :regions_orders has_many :regions, through: :regions_orders end class RegionsOrder < ApplicationRecord belongs_to :order belongs_to :region end class Region < ApplicationRecord has_many :regions_orders has_many :orders, through: :regions_orders end。

如何使用Redux选择列表项？

2 个答案: