使用传递的道具从内部useeffect更新状态数组

yh2wf1be  于 2021-09-29  发布在  Java
关注(0)|答案(1)|浏览(247)

此问题已在此处找到答案

使用状态设置方法不立即反映变化(14个答案)
react setstate未更新状态(10个答案)
五小时前关门了。
我想从useeffect钩子中更新并添加到一个状态数组中,该钩子在每次从另一个组件触发事件(并且该组件的道具被传递到该组件)时都会进行渲染。为了快速起见,我会让您知道这一点 tempPlaylistTrack 是一个对象数组,我试图从中获取第一个值,并从另一个组件正确接收它。以下是我遇到问题的组件的代码:

function Playlist({ tempPlaylistTrack }) {

    const [tempTracks, setTempTracks] = useState([]);

    useLayoutEffect(() => {

        !!tempPlaylistTrack && setTempTracks([...tempPlaylistTrack[0], tempTracks]);

        console.log("tempTracks", tempTracks);

    }, [tempPlaylistTrack]);

从我对这个主题的阅读来看,我相信这个问题可能源于它不是同步的(?),但作为一个相对的初学者,我真的不知道从这里可以走到哪里。
我还应该提到,有人警告我 tempTracks 在useeffect中缺少依赖项,但当我包含它时,这会导致无限循环。console log from inside use effect显示了第二次从其他组件(而不是第一次)触发事件后的预期行为。
提前感谢您的帮助。

6tr1vspr

6tr1vspr1#

使用spreed操作器执行以下操作: tempTracks 而不是 tempPlaylistTrack[0] ,若您需要访问以前的状态,则最好使用函数作为的参数 setTempTracks :

setTempTracks((preState) => ([...prevState, tempPlaylistTrack[0]]))

相关问题