Question

我正在尝试使用在中篇文章中找到的该组件。我正在创建一个聊天室。下面的组件是我要修改和重用的聊天框。由于某种原因，构造函数被调用两次。我是新来的反应。我猜是因为状态改变才这样做的。

import React from "react";
import io from "socket.io-client";

class Chat extends React.Component{
    constructor(props){
        super(props);
        console.log("constructor called");
        this.state = {
            username: '',
            message: '',
            messages: []
        };

        this.socket = io('localhost:5000');
        console.log("socket created");

        this.socket.on('RECEIVE_MESSAGE', function(data){
            addMessage(data);
        });

        const addMessage = data => {
            console.log(data);
            this.setState({messages: [...this.state.messages, data]});
            console.log(this.state.messages);
        };

        this.sendMessage = ev => {
            ev.preventDefault();
            this.socket.emit('SEND_MESSAGE', {
                author: this.state.username,
                message: this.state.message
            })
            this.setState({message: ''});

        }
    }

    render(){
        return (
            <div className="container">
                <div className="row">
                    <div className="col-4">
                        <div className="card">
                            <div className="card-body">
                                <div className="card-title">Global Chat</div>
                                <hr/>
                                <div className="messages">
                                    {this.state.messages.map(message => {
                                        return (
                                            <div>{message.author}: {message.message}</div>
                                        )
                                    })}
                                </div>

                            </div>
                            <div className="card-footer">
                                <input type="text" placeholder="Username" value={this.state.username} onChange={ev => this.setState({username: ev.target.value})} className="form-control"/>
                                <br/>
                                <input type="text" placeholder="Message" className="form-control" value={this.state.message} onChange={ev => this.setState({message: ev.target.value})}/>
                                <br/>
                                <button onClick={this.sendMessage} className="btn btn-primary form-control">Send</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Chat;

Answer 1

我也是反应的新手，我早些时候也遇到了类似的困惑，因为这是因为新的严格反应模式，请检查将app.js包裹在index.js中的组件，您可以在官方文档

在React组件中构造函数被两次调用

1 个答案: