Question

我刚开始使用ReactJS，但在理解状态和道具方面仍然存在问题。

我正在尝试使用node.js，React和Socket.io构建一个聊天应用程序。在服务器端一切正常，但是，我在显示数据时有些困难。

这是我的问题：我有一个包含三个组件的应用，其组织如下：

聊天 |-邮件列表 |-MessageInput

我希望Chat组件保存消息列表，该列表由服务器和messageInput组件提供。

由于聊天组件将保持状态，因此我有一个构造函数，用于初始化两个变量。但是，当我从messageInput更新这些变量时，该组件将重新呈现，从而导致再次调用构造函数并重新初始化状态。

class Chat extends React.Component{
    constructor(){
        super()
        this.state = {
            messageList: [],
            username:null
        }
    }

我注意到从服务器检索到的数据不会导致状态设置为默认。输入重置了Chat组件中的状态值，但似乎可以正常工作：将消息发送到服务器，并显示给其他客户端。

我认为我还不太了解如何在组件中正确设置状态。您会在下面找到一些客户端代码。

谢谢！

const io = require('socket.io-client')
const socket = io.connect('localhost:4242')

class Chat extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            messageList: [],
            username:null
        }
    }

    componentDidMount(){
        if (this.state.username == null){
            var user = prompt("Enter username:")
            this.setState(
                {username: user}, function(){
                    socket.emit('new_client', this.state.username)
                    this.addMessage({
                        text: this.state.username + " has entered the chat",
                        sender:"server",
                        timestamp: Date.now()})
                    })
        }
        socket.on('broadcast', data =>{
            let newList = this.state.messageList.concat([data])
            this.setState({messageList: newList})
        })

    }
    addMessage(object) {
        const array = this.state.messageList
        let newList = array.concat([object])
        this.setState({
            messageList: newList})
    }

    sendMessage(messageString){
      const message = {sender: this.state.username,
            text: messageString,
            timestamp: Date.now()}
        socket.emit('message', message)
        this.addMessage(message)
    }

        render(){
            return(
                <div className="app">
                <MessageList
                    messageList={this.state.messageList}
                    username={this.state.username}
                 />
                <MessageInput
                    sendMessage={i=> this.sendMessage(i)}
                />
                </div>
            )
        }
}

class MessageList extends React.Component{
//USED TO DISPLAY CHAT MESSAGES, WORKS WELL
}


class MessageInput extends React.Component{

    constructor(props){
        super(props)
        this.state = {
            message:''
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }


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

    handleSubmit(event){
        this.props.sendMessage(this.state.message)
        this.setState({
            message:''
        })
    }
    render(){
        return(
            <form
               onSubmit={this.handleSubmit}
               className="send_message_form">
               <input
                   onChange={this.handleChange}
                   value={this.state.message}
                   placeholder="Input a new message"
                   type="text"/>
           </form>
        )
    }
}

Answer 1

重新渲染组件不会导致其状态被重置。尝试将handleSubmit函数更改为：

handleSubmit(event){
    this.props.sendMessage(this.state.message)
    this.setState({
        message:''
    })
    event.preventDefault(); // So the page won't refresh
}

ReactJS：每次更新时，状态均会恢复为初始值

1 个答案: