React添加新评论后页面不重新渲染问题求助

问题根源 #

你的React组件(Comments)仅在初始化时将filteredComments赋值给state，后续外部直接修改allComments和filteredComments数组的操作，无法被React的状态机制捕获——React只会在组件的state或props发生变更时触发重新渲染。

解决方案：将评论数据纳入React状态管理 #

把评论数据的维护逻辑整合到React组件内部，通过setState更新状态来触发页面渲染。以下是具体修改步骤：

1. 重构Comments类组件 #

将评论数据移至组件state，并添加评论更新、事件监听相关逻辑：

class Comments extends React.Component {
    constructor(props) {
        super(props);   
        // 初始化时将外部评论数据存入组件state
        this.state = {
            allComments: allComments,
            filteredComments: filteredComments
        };
    }

    // 更新评论状态的方法
    updateCommentState = (newAllComments) => {
        const newFiltered = filterComments(newAllComments);
        this.setState({
            allComments: newAllComments,
            filteredComments: newFiltered
        });
    }

    // 处理添加评论的逻辑
    handleAddComment = () => {
        const { allComments } = this.state;
        // 获取输入框内容
        const commentContent = document.getElementById("txtComment").value;
        if (!commentContent.trim()) return;

        // 生成新评论所需参数
        const ids = allComments.map(item => item.Id);
        const minorRevisions = allComments.map(item => item.MinorRevision);
        const newId = Math.max(...ids) + 1;
        const newMinorRev = Math.max(...minorRevisions) + 1;
        const localId = allComments[allComments.length - 1].LocalId + 1;
        const commentDate = toIsoString(new Date());

        // 构造新评论对象
        const newComment = {
            AttachmentId: null, 
            Comment: commentContent, 
            Commenter: {ItemId: '30837400-a72a-ec11-80d4-00155d006701', Name: 'Lewis Ross'},
            Id: newId, 
            IsDeleted: false, 
            LocalId: localId, 
            MinorRevision: newMinorRev, 
            ParentCommentId: null, 
            Recipients: [],  
            Time: commentDate
        };  

        // 创建新数组（保持state不可变性，避免直接修改原数组）
        const updatedAllComments = [...allComments, newComment];
        // 更新state触发渲染
        this.updateCommentState(updatedAllComments);
        // 清空输入框
        document.getElementById("txtComment").value = '';
    }

    // 组件挂载时绑定事件监听
    componentDidMount() {
        const saveBtn = document.getElementById('save-comment');
        saveBtn.addEventListener('click', this.handleAddComment);
    }

    // 组件卸载时移除监听，防止内存泄漏
    componentWillUnmount() {
        const saveBtn = document.getElementById('save-comment');
        saveBtn.removeEventListener('click', this.handleAddComment);
    }

    render() {
        return (
            <div>
                <RevisionHeader object={this.state.filteredComments} />
            </div>
        );
    }
}

2. 删除外部独立的事件监听代码 #

移除原来在React组件外写的addNewComment.addEventListener逻辑，因为相关逻辑已经整合到组件内部。

关键修改点说明 #

• 状态内聚：将allComments和filteredComments纳入组件state，React能感知到状态变化并触发重新渲染。
• 不可变更新：使用扩展运算符[...allComments, newComment]创建新数组，避免直接修改原数组——React依赖状态的引用变化来检测更新。
• 生命周期规范：在componentDidMount绑定事件，componentWillUnmount移除事件，符合React组件的生命周期管理要求。

备选方案（无法修改外部代码时） #

如果不能将添加评论的逻辑移入组件，可以通过自定义事件通知组件更新：

1. 外部代码修改：

const addNewComment = document.getElementById('save-comment');
addNewComment.addEventListener('click', function() {
    // ... 原创建新评论的逻辑 ...
    allComments.push(newComment);
    filteredComments = filterComments(allComments);
    // 触发自定义事件
    window.dispatchEvent(new CustomEvent('commentsUpdated', {
        detail: { allComments, filteredComments }
    }));
});

2. Comments组件添加事件监听：

class Comments extends React.Component {
    constructor(props) {
        super(props);   
        this.state = {
            allComments: allComments,
            filteredComments: filteredComments
        };
    }

    componentDidMount() {
        window.addEventListener('commentsUpdated', this.handleUpdate);
    }

    componentWillUnmount() {
        window.removeEventListener('commentsUpdated', this.handleUpdate);
    }

    handleUpdate = (e) => {
        const { allComments, filteredComments } = e.detail;
        this.setState({ allComments, filteredComments });
    }

    render() {
        return <RevisionHeader object={this.state.filteredComments} />;
    }
}

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