解决React组件列表状态更新不触发渲染：受控组件的最佳实践

// 原始有问题的代码片段
class ChatPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userMessages: [[0, 'First example message'], [1, 'Second msg']],
            userMessageNextId: 2,
        };
        this.sendMessage = this.sendMessage.bind(this);
    }

    render() {
        console.log(this.state.userMessages); // 调试显示状态已更新
        return (
            <div className="chat-page mb-5">
                <div className="messages-container">
                    {/* ... 现有消息组 ... */}
                    <MessageGroup sentByUser>
                        {this.state.userMessages.map((val) => (<Message key={val[0]}>{val[1]}</Message>))}
                    </MessageGroup>
                </div>
                <div className="input-container">
                    <div className="input-group">
                        <input type="text" className="form-control" id="message-text" placeholder="Type something..."/>
                        <button className="btn btn-primary" onClick={this.sendMessage}>Send</button>
                    </div>
                </div>
            </div>
        )
    }

    sendMessage() {
        const messageText = document.querySelector("#message-text").value; // 直接DOM操作获取输入值
        if (!messageText?.trim()) return;
        this.setState(state => {
            console.log('Setting state...') // 此处显示setState被调用
            const newArray = [...state.userMessages, [state.userMessageNextId, messageText]];
            return {
                userMessages: newArray,
                userMessageNextId: state.userMessageNextId + 1
            }
        })
    }
}

// 改进后的代码
class ChatPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userMessages: [[0, 'First example message'], [1, 'Second msg']],
            userMessageNextId: 2,
            messageText: '' // 1. 在状态中添加一个字段来管理输入框的值
        };
        this.sendMessage = this.sendMessage.bind(this);
        this.handleInputChange = this.handleInputChange.bind(this); // 绑定事件处理器
    }

    render() {
        console.log(this.state.userMessages);
        return (
            <div className="chat-page mb-5">
                <div className="messages-container">
                    <MessageGroup sentBy="Juan">
                        <Message>This is the first message</Message>
                        <Message>This is the second message</Message>
                    </MessageGroup>
                    <MessageGroup sentByUser>
                        {this.state.userMessages.map((val) => (
                            <Message key={val[0]}>{val[1]}</Message>
                        ))}
                    </MessageGroup>
                </div>
                <div className="input-container">
                    <div className="input-group">
                        <input
                            type="text"
                            className="form-control"
                            id="message-text"
                            placeholder="Type something..."
                            value={this.state.messageText} // 2. 将输入框的value属性绑定到state.messageText
                            onChange={this.handleInputChange} // 3. 添加onChange事件处理器
                        />
                        <button className="btn btn-primary" onClick={this.sendMessage}>
                            Send
                        </button>
                    </div>
                </div>
            </div>
        );
    }

    sendMessage() {
        if (!this.state.messageText.trim()) return; // 4. 从state中获取输入值
        this.setState((state) => {
            console.log('Setting state...');
            const newArray = [...state.userMessages, [state.userMessageNextId, state.messageText]];
            return {
                userMessages: newArray,
                userMessageNextId: state.userMessageNextId + 1,
                messageText: '' // 5. 发送消息后清空输入框，通过更新state实现
            };
        });
    }

    handleInputChange(event) {
        this.setState({ messageText: event.target.value }); // 6. 更新state.messageText以反映输入框的当前值
    }
}

export default ChatPage;