ReactJS：状态在每次更新时都设置回初始值

Question

我刚开始使用 ReactJS，但我仍然无法理解状态和道具。

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

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

聊天 |- 消息列表 |- 消息输入

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

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

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

我注意到从服务器检索的数据不会导致状态设置为默认值。 Input 重置了 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：状态在每次更新时都设置回初始值

ReactJS: State is set back to initial value at each update

javascript

reactjs

react-props