Question

我尝试通过Redux名称为Playing的状态来控制我的应用在歌曲的播放/暂停中，并且当我当前歌曲的ID更改时，获取数据并调度操作以更改详细信息，我希望效果取决于isPlaying和id，所以当我更改歌曲并且播放不会停止时，为什么为什么在id更改时这种效果仍然不起作用。第一个钩子控制歌曲的播放，第二个钩子控制歌曲的详细信息获取，第二个钩子可以运行，但第一个不能运行。

  useEffect(() => {
  const audio = document.getElementById('audioSource');
  state.playerControl.isPlaying? audio.play():audio.pause()
},[state.playerControl.isPlaying,store,state.playerViews.currentSongStatus.id])


  useEffect( () => {
    fetch(`http://localhost:5000/api/songsResourceObjArr/${store.getState().playerViews.currentSongStatus.id}`,{
      mode:'cors',
      header:{
        'Access-Control-Allow-Origin':'*'
      }
    })
    .then(
      (res) => res.text()
    )
    .then(
      (data) => {
        console.log(data)
        store.dispatch({type:'changeCurrentSongStatus',
                        payload:JSON.parse(data)[0]})
      }
    )
} , [state.playerViews.currentSongStatus.id, store])


case 'changePlayingStatus':
          return{
             ...state,
             isPlaying:!state.isPlaying
                   }

加：当我这样说的时候就可以了

  useEffect(() => {
  const audio = document.getElementById('audioSource');
  state.playerControl.isPlaying? audio.play():audio.pause()
},[state.playerControl.isPlaying])


  useEffect( () => {
fetch(`http://localhost:5000/api/songsResourceObjArr/${store.getState().playerViews.currentSongStatus.id}`,{
  mode:'cors',
  header:{
    'Access-Control-Allow-Origin':'*'
  }
})
.then(
  (res) => res.text()
)
.then(
  (data) => {
    console.log(data)
    store.dispatch({type:'changeCurrentSongStatus',
                    payload:JSON.parse(data)[0]})
    const audio = document.getElementById('audioSource');
    store.getState().playerControl.isPlaying? audio.play():audio.pause()
  }
)
} , [state.playerViews.currentSongStatus.id])

所以它让我感到困惑，为什么当我在deps数组中放置两个dep时它不起作用？

Answer 1

您的挂钩依赖项仅在呈现组件时进行评估。因此，您需要确保的第一件事是该组件正在按您期望的方式呈现。您可以在钩子之前使用简单的console.log进行调试。

您的问题很可能与钩子无关，与Redux有关。也许您的化简会直接设置isPlaying字段，而不是用状态切片代替新对象？

Answer 2

useEffect（（）=> {

}，[primitiveTypeDeps]）

当deps是一个对象/数组时，

useEffect函数将不会检测到更改，尝试使用原始值->以下

这是原始数据类型 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures

那么为什么需要将原始数据类型放入useEffect deps数组中基本类型不保留引用，useEffect可以轻松检查值是否已更改

为什么当deps更改时我的特定useEffect挂钩没有运行

2 个答案: