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”]。当我再次发送“你好”时，那么输出应为[“ Hii”，“ Hello”] 相反，我得到的输出为[“ Hii”，“ Hello”，“ Hello”]

Answer 1

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

setState内部的spread运算符执行两次，而不是执行一次

1 个答案: