javascript - React useState() - 在数组中添加新元素不起作用

Question

我正在使用 React native 和 socket.io 制作聊天应用程序，但是当我收到一条消息时，我想添加到消息数组中。但不知何故它不起作用。它替换数组元素而不是向其推送/添加元素。

const [messages, setMessages] = useState([])


useEffect(() => {
    const id = data.id
    receiveMessage(id)
}, []);

async function receiveMessage(id){
    await message.init(id)
    message.recieveMessage(message=>{
        setMessages([...messages, message])//something is wrong over here
    })
}


async function send(){
    if(text){
        message.sendMessage(text, data=>{
            setMessages([...messages, data])//this part works perfectly
        })
    }
    setText(null)
}

这是Messages object：

export class Message {
    private socket: Socket
    private room: string
    constructor(socketio: Socket){
        this.socket = socketio
        this.room = null
    }
    async init(id: string){
        if(id === this.room) {
            return
        }
        this.room = id
        this.socket.emit("join", {id: id, session: await getSessionToken()})
        
        const prom = new Promise((res, rej)=>{
            this.socket.on("joined", message=>{
                res("done")
            })
        })
        await prom
        return "done"
    }
    public sendMessage(message: string, callback){
        const socket = this.socket
        socket.emit("message", message)
        socket.on("sent", callback)
    }
    public recieveMessage(callback){
        const socket = this.socket
        socket.on("receive message", callback)
    }
}

标签： javascriptreactjstypescriptreact-nativesocket.io

Answer 1

是否有可能是因为您没有将先前的状态传递给setMessages调用？

也许试试这样的东西

async function receiveMessage(id) {
  await message.init(id)

  message.recieveMessage(message => {
    setMessages(prevMessages => [...prevMessages, message])
  })
}