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}