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

Question

我尝试控制我的应用程序在歌曲的播放/暂停中使用 redux 名称为 isPlaying 的状态，当我当前歌曲的 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 放入 deps 数组时它不起作用？

Answer 1

你的钩子依赖只会在渲染组件时被评估。因此，您必须确保的第一件事是组件正在按照您的预期进行渲染。你可以在你的钩子之前用一个简单的console.log 来调试它。

您的问题很可能与钩子无关，而与 Redux 有关。也许你的 reducer 是直接设置 isPlaying 字段，而不是为新对象替换它的状态切片？

Answer 2

useEffect(() => {

}, [primitiveTypeDeps])

当 deps 是一个对象/数组时，useEffect 函数不会检测到变化， 尝试使用原始值 -> 跟随

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

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