javascript - 事件处理程序后反应状态变量失去价值

Question

我呈现一个表格和一个列表。它在初始加载时工作得很好：

            <UsersList
                users={this.state.users}
            />
            <SendMessageForm
                sendMessage={this.addMessage}

            />

但是，当 SendMessageForm 被提交时this.state.users失去它的价值，我得到Cannot read property 'map' of undefined.

这是发送消息表单：

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;

你能帮我理解状态变量 users 是如何失去它的价值的吗？

编辑：

将消息添加到 MessageList。MessageList 工作得很好，问题出在 UsersList 上。顺便说一句，我正在使用 Chatkit 库。

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

标签： javascriptreactjs