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

Question

我刚开始使用 ReactJS，但在理解状态和道具方面仍然存在问题。我正在尝试使用 node.js、React 和 Socket.io 构建一个聊天应用程序。在服务器端一切正常，但是，我很难显示数据。这是我的问题：我有一个包含三个组件的应用程序，组织如下：聊天 |- 消息列表 |- 消息输入我希望 Chat 组件保存一个消息列表，该列表由服务器和 messageInput 组件提供。由于聊天组件将保持状态，因此我有一个初始化两个变量的构造函数。但是，当我从 messageInput 更新这些变量时，会重新渲染组件，从而导致再次调用构造函数并重新初始化状态。class Chat extends React.Component{    constructor(){        super()        this.state = {            messageList: [],            username:null        }    }我注意到从服务器检索的数据不会导致状态设置为默认值。输入重置了 Chat 组件中的状态值，但似乎按预期工作：消息被发送到服务器，并显示给其他客户端。我想我还没有完全理解如何在组件中正确设置状态。您将在下面找到一些客户端代码。

Answer 1

重新渲染一个组件不会导致它的状态被重置。尝试将您的handleSubmit功能更改为：

handleSubmit(event){

    this.props.sendMessage(this.state.message)

    this.setState({

        message:''

    })

    event.preventDefault(); // So the page won't refresh

}