Question

我想从 useEffect 钩子内部更新并添加到状态数组，该钩子每次从另一个组件触发事件时都会渲染（并且该组件的道具被传递给这个组件。）为了快速起见，我会让您知道 tempPlaylistTrack 是一个对象数组，我试图从中获取第一个值，并且我从另一个组件正确接收到它。这是我遇到问题的组件的代码：

function Playlist({ tempPlaylistTrack }) {
    
    const [tempTracks, setTempTracks] = useState([]);

    useLayoutEffect(() => {

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

        console.log("tempTracks", tempTracks);

    }, [tempPlaylistTrack]);

从我对这个主题的阅读来看，我认为问题可能源于它不是同步的（？），但作为一个相对的初学者，我真的不知道从哪里开始。

我还应该提到，我被警告说 tempTracks 是 useEffect 中缺少的依赖项，但是当我包含它时，这会导致无限循环。来自内部使用 Effect 的控制台日志显示第二次从其他组件触发事件后的预期行为，但不是第一次。

在此先感谢您的帮助。

Answer 1

对 tempTracks 使用 spreed 运算符而不是 tempPlaylistTrack[0]，如果您需要访问以前的状态，最好使用函数作为 setTempTracks 的参数：

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

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

1 个答案: