反应验证不适用于插座

Question

因此，我从后端通过套接字接收数据，然后将数据（项目）推向数组，但是如果变量为真（表示其暂停），我不想将项目推到数组。

    const [sales, setSales] = useState([])
    const [paused, setPaused] = useState(false);
    const handlePush = (dt) => {
        if(paused) return;
            let data = dt.itemListed.data
            let obj = {
                name: dt.itemListed.data.item.metadata.name,
                data
            }
            if (sales.findIndex(i => i.name === dt.itemListed.data.item.metadata.name) > 0) return;
            if (sales.length >= 10) sales.pop();
            setSales(prevState => [obj, ...prevState])
    }
    useEffect(() => {
        socket.on("itemListed", (dt) => {
            handlePush(dt);
        })
    }, [socket])

变量暂停设置为True，IM已经调试了它，我还在屏幕上显示了一个文本，说它是否暂停。另外，我检查数组大小是否为10的代码也无法正常工作。

该代码工作正常，但后来我更改为socket.io-client lib，它停止工作。

我认为正在发生的事情是，使用效应仅是“读”一次，它忽略了期货验证，它一直在推动项目。

我能做些什么？

Answer 1

这应该解决您的问题

useEffect(() => {
    socket.on("itemListed", (dt) => {
        handlePush(dt);
    })

    return () => {
        socket.off("itemListed") // cleanup
    };
}, [socket, handlePush])

您的使用效果是在使用旧的puse值的先前版本的handlepush上聆听，因此这就是为什么它仍然能够推动的原因。

如果添加函数handlepush作为使用效果的依赖性，则每次handerpush更改都会重新运行，因此您将拥有最新的函数。

为了进行性能，您还应使用 usecallback（usecallback（） handlepush（）函数上的挂钩。