问题描述
我对React还是很陌生，但是已经有几个星期了。
我正在构建音乐播放列表应用。 单击轨道时，它首先检查（API）是否具有可用的音频源。 如果是，则播放曲目。如果没有，则转到下一个。
有时候，是在发出API请求时，用户单击了另一条轨道。
因此，在跟踪组件中，我想将跟踪索引与上下文跟踪索引进行比较，以检查是否仍然需要播放请求的第一条跟踪，只要它具有API响应即可。
问题是，当我在useEffect函数中比较两个值时，它为上下文跟踪索引获取了错误的值（旧状态？）。
在我的减速器中：
case 'SET_TRACK_INDEX':
console.log("(Context) SET TRACK INDEX TO: " + action.payload)
return {
...state,trackIndex:action.payload
}
break;
在我的跟踪组件中：
const [playlistData,setPlaylistData] = useContext(PlaylistContext);
//function called when I click the track
const onToggleTrack = () => {
//set index to "1" in the context
setPlaylistData({
type: "SET_TRACK_INDEX",payload:1
});
//after one second,change index to "2" to simulate user action
setTimeout(
function(){
console.log("(onToggle) waited two seconds and change index...");
setPlaylistData({
type: "SET_TRACK_INDEX",payload:2
});
},1000
);
}
//runs when context index is updated to "1"
React.useEffect(() => {
// (run this test for the track "1" only)
if (playlistData.trackIndex !== 1) return;
console.log("(useEffect) TRACK INDEX IS Now: "+ playlistData.trackIndex);
const index = playlistData.trackIndex;
const testIndexes = () => {
setTimeout( //simulate an API request delay
function(){
console.log("(useEffect) Now context index should have been updated to '2',check values...");
console.log("(useEffect) THIS INDEX: " + index + " VS CONTEXT INDEX: " + playlistData.trackIndex);
},4000
);
}
testIndexes();
},[playlistData.trackIndex]);
这就是我在控制台中看到的内容：
(Context) SET TRACK INDEX TO: 1
(useEffect) TRACK INDEX IS Now: 1
(onToggle) waited two seconds and change index...
(Context) SET TRACK INDEX TO: 2
(useEffect) Now context index should have been updated to '2',check values...
(useEffect) THIS INDEX: 1 VS CONTEXT INDEX: 1
所以，正如您所看到的，我应该/想要得到
(useEffect) THIS INDEX: 1 VS CONTEXT INDEX: 2
但是我明白了
(useEffect) THIS INDEX: 1 VS CONTEXT INDEX: 1
触发useEffect时上下文值是否为“冻结”？
我该如何解决？
谢谢！
顺便说一下，这是我的真实代码：
React.useEffect(() => {
if (track !== playlistData.trackRequested) return;
setApiLoading(true);
track.prepareSources()
.then(function(){
console.log("SOURCES READY FOR TRACK " + track.jspf.title + " by " + track.jspf.creator);
track.getNextPlayableSource()
.then(function(nextSource){
console.log("REQUESTED: " + playlistData.trackRequested.jspf.title + " by " + playlistData.trackRequested.jspf.creator);
console.log("CURRENT: " + track.jspf.title + " by " + track.jspf.creator);
if (playlistData.trackRequested === track){ //double check this is still the requested track
setPlaylistData({
type: "REQUEST_SOURCE",payload:nextSource
});
}
})
.catch(function(err){
console.log("BWERK")
})
})
.catch(function(err){
setPlaylistData({
type: "TRACK_ERROR"
});
console.log("SKEEEEP TRACK");
skipToNextTrack();
})
.finally(function(){
setApiLoading(false);
})
},[playlistData.trackRequested]);
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）