reactjs - setState 中的扩展运算符执行两次而不是一次

Question

当用户提交表单时，onSubmitMessage() 会被调用，这反过来会向服务器端的套接字发出一个事件，当向客户端发送响应时，它会执行两次 setState 函数而不是一次。

客户端代码

state = {
        message: '',
        currentChat: []
    }
onChangeMessage = (event) => {

        this.setState({
            message: event.target.value
        });   
    }

onSubmitMessage = (event) => {     
        event.preventDefault();

        this.setState({
            message: ''
        });

        console.log(this.state.message);


        socket.emit('inputMessage', {
            username: this.props.username,
            message: this.state.message
        });

        socket.on('currentsocketchat', (data) => {

            console.log('data is ',data.message);

            this.setState({
                currentChat: [...this.state.currentChat, data.message]
            }, () => console.log(this.state.currentChat));

        });

    }

    render() {

        return (
            <div className="inputbar">
                <form onSubmit={this.onSubmitMessage}>
                    <input 
                    ref={this.inputRef}
                    type="text" 
                    placeholder="Enter message" 
                    value={this.state.message}
                    onChange={this.onChangeMessage} />
                </form>
            </div>
        )
    }

//Server side code

socket.on('inputMessage', (data) => {
        console.log(data.username, data.message);

        const newChat = new Chat({
            name: data.username,
            message: data.message,
        });

        newChat.save().then(() => {
            socket.emit('currentsocketchat', newChat);
            // socket.broadcast.emit('broadcastchat', data);

        }).catch((e) => {
            console.log(e);
        })

    });

当我提交输入值为“Hiii”的表单时，this.state.currentChat 的输出应该是 [“Hiii”]。当我再次发送“Hello”时，输出应该是 ["Hii","Hello"] 而我得到的输出是 ["Hii","Hello", "Hello"]

标签： reactjs

Answer 1

每次onSubmitMessage执行时，您都在向套接字消息添加一个侦听器。所以第二次提交，回调会被调用两次，第三次提交会被调用3次。移动socket.on('currentsocketchat'...到componentDidMount，这应该工作。