javascript - ReactJS:状态在每次更新时设置回初始值

Question

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

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

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

• 聊天|- 留言列表|- 消息输入

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

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

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

我注意到从服务器检索的数据不会导致状态设置为默认值。输入重置聊天组件中的状态值，但似乎正在按预期工作:消息发送到服务器，并显示给其他客户端。

我想我还不太明白如何正确设置组件中的状态。您将在下面找到一些客户端代码。

提前致谢!

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
}