reactjs - 如何在 React 中的套接字事件后删除数组中的元素？

Question

我在使用 React 状态数组和钩子时遇到问题。接收套接字事件时

socket.on("connection request", ({address}) => {
    let lastConnection = connections
    lastConnection.push({address, actions: <div className="align-right">
        <MDBBtn color="success" onClick={() => approveConnection(address, false)}>Approve</MDBBtn>
        <MDBBtn color="danger" onClick={() => approveConnection(address, true)}>Refuse</MDBBtn>
    </div>})
    setConnections([...lastConnection])
})

我更新了连接列表。那部分有效，但是当我尝试使用从该列表中删除一篇文章时

    const approveConnection = (address, banned) => {
        console.log("removing address " + address + " from " + connections)
        socket.emit("client allow", {address, banned})
        let oldConnections = connections
        oldConnections = oldConnections.filter(a => a.address !== address)
        setConnections([...oldConnections])
    }

它工作一次，但是当我尝试删除第二个时，第一个删除的会弹回到列表中，并且在尝试删除另一个元素时它会继续这样。

你能帮助我吗？

标签： reactjssocket.ioreact-hooks

Answer 1

无需复制然后过滤。您可以简单地过滤并将其传递给setConnections，而无需[]

let oldConnections = connections.filter(p => p.address !== address);
setConnections(oldConnections);