Javascript React状态变量在事件处理程序之后丢失值

我呈现一个表单和一个列表。它在初始加载时工作正常：

以下是用户列表：

import React, { Component } from 'react';

class UsersList extends Component {
    render() {
            return (
                <div id="UList">
                    <ul className="users-list">
                        {this.props.users.map((user, index) => {
                            return (
                                <li key={index}>
                                    <span>{user}</span>
                                </li>
                            );
                        })}
                    </ul>
                </div>
            );
        }
    }
export default UsersList;

---

您的代码似乎正常工作，

addMessage

做什么？有一个存储消息的消息列表。添加消息将消息添加到列表中。这个很好用。你说似乎在工作是什么意思？你在哪里检查的？看你应该张贴你的addMessage函数的代码。问题很可能是代码在给定的链接stackblitz.com/edit/react-3ufwkv？file=index.js上运行正常

export default class SendMessageForm extends React.Component {
    constructor() {
        super();
        this.state = {
            message: ''
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

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

    handleSubmit(e) {
        e.preventDefault();
        this.props.sendMessage(this.state.message);
        this.setState({
            message: ''
        });
    }

    render() {
        return (
            <div id="MessageField">
                <form
                    onSubmit={this.handleSubmit}
                    className="send-message-form">
                    <input
                        onChange={this.handleChange}
                        value={this.state.message}
                        placeholder="Type your message and hit ENTER"
                        type="text"
                    />
                </form>
            </div>
        );
    }
}

import React, { Component } from 'react';

class UsersList extends Component {
    render() {
            return (
                <div id="UList">
                    <ul className="users-list">
                        {this.props.users.map((user, index) => {
                            return (
                                <li key={index}>
                                    <span>{user}</span>
                                </li>
                            );
                        })}
                    </ul>
                </div>
            );
        }
    }
export default UsersList;

addMessage(text) {
    this.state.currentUser.sendMessage({
        text,
        roomId: this.state.roomId.toString()
    })
        .catch(error => console.error('error', error));
}