React类组件中状态列表更新后未触发重渲染的问题排查

使用React类组件开发聊天页面，预期将输入框发送的每条消息追加到<MessageGroup sentByUser>区块中。调试时能看到状态中的两条默认消息，发送消息时控制台显示“Setting state...”和新数组，但UI并未发生变化。

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 sentBy="Juan">
                        <Message>This is first message</Message>
                        <Message>This is 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..."/>
                        <button className="btn btn-primary" onClick={this.sendMessage}>Send</button>
                    </div>
                </div>
            </div>
        )
    }

    sendMessage() {
        const messageText = document.querySelector("#message-text").value;
        if (!messageText?.trim()) return;
        this.setState(state => {
            console.log('Setting state...')
            const newArray = [...state.userMessages, [state.userMessageNextId, messageText]];
            return {
                userMessages: newArray,
                userMessageNextId: state.userMessageNextId + 1
            }
        })
    }
}

根据代码和描述，状态已更新但UI未同步，可能的原因及解决方法如下：

1. 输入框未清空导致视觉混淆 #

发送消息后输入框内容仍保留，你可能误以为消息未发送，但新消息实际已添加到列表中，只是被滚动条遮挡在下方。

解决方法：在sendMessage方法中，状态更新完成后清空输入框：

sendMessage() {
    const inputEl = document.querySelector("#message-text");
    const messageText = inputEl.value;
    if (!messageText?.trim()) return;
    this.setState(state => {
        console.log('Setting state...')
        const newArray = [...state.userMessages, [state.userMessageNextId, messageText]];
        return {
            userMessages: newArray,
            userMessageNextId: state.userMessageNextId + 1
        }
    }, () => {
        // 状态更新完成后清空输入框
        inputEl.value = '';
    })
}

2. Message或MessageGroup组件实现问题 #

如果Message组件使用自身状态存储内容，而非直接使用props.children，会导致新消息的props变化无法触发UI更新。比如错误的Message组件实现：

// 错误示例
class Message extends Component {
    constructor(props) {
        super(props);
        this.state = { text: props.children };
    }
    render() {
        return <div>{this.state.text}</div>;
    }
}

解决方法：修改Message组件直接使用props.children渲染内容：

// 正确示例
class Message extends Component {
    render() {
        return <div>{this.props.children}</div>;
    }
}

若MessageGroup是PureComponent，只要它的实现能正确响应children的变化（你的代码中每次map都会生成新的元素数组，符合更新条件），就会正常重新渲染。

3. 推荐优化：改用受控组件管理输入框 #

当前使用原生DOM API获取输入框值的方式不符合React数据流规范，推荐改用受控组件，将输入框值绑定到组件状态：

class ChatPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userMessages: [[0, 'First example message'], [1, 'Second msg']],
            userMessageNextId: 2,
            inputText: '' // 添加输入框状态
        };
        this.sendMessage = this.sendMessage.bind(this);
        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleInputChange(e) {
        this.setState({ inputText: e.target.value });
    }

    render() {
        console.log(this.state.userMessages);
        return (
            <div className="chat-page mb-5">
                <div className="messages-container">
                    <MessageGroup sentBy="Juan">
                        <Message>This is first message</Message>
                        <Message>This is 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" 
                            value={this.state.inputText} // 绑定状态
                            onChange={this.handleInputChange} // 绑定变化事件
                            placeholder="Type something..."/>
                        <button className="btn btn-primary" onClick={this.sendMessage}>Send</button>
                    </div>
                </div>
            </div>
        )
    }

    sendMessage() {
        const messageText = this.state.inputText.trim();
        if (!messageText) return;
        this.setState(state => {
            const newArray = [...state.userMessages, [state.userMessageNextId, messageText]];
            return {
                userMessages: newArray,
                userMessageNextId: state.userMessageNextId + 1,
                inputText: '' // 清空输入框状态
            }
        })
    }
}

内容的提问来源于stack exchange，提问作者Sergey Kazantsev