Javascript 在非常嵌套的组件树中获取和发送数据的位置

我希望我的应用程序的用户能够评论和喜欢一篇文章。因此，我创建了一个具有以下结构的组件树

• 顶部组件
  • 视图组件
    • 顶栏
    • 身体
      • 作者卡
      • 明信片
      • 评论集
      • 浮动式按钮组件

加载时，顶部组件将获取数据。当它获取时，主体组件将显示一个预加载程序。获取后，它将数据发送到（用户数据）视图->topbar和（发布数据）视图->正文。在我尝试评论之前，一切都正常。注释组件将注释发送到body->view->top。重新渲染后，它再次显示预加载程序。当我单击like按钮时也会发生这种情况。那么，他们的方法是避免这种情况吗？提前感谢

编辑：

顶部组件添加注释：来自注释组件的数据

addComment = data => {
        this.props.add_comment(data).then(
            () => {
                this.props.fetch_data();
                if (this.props.isLoggedIn) {
                    this.props.fetch_user_data();
                }
            }
        );
    }

mapStateToDispatch：

const mapDispatchToProps = dispatch => {
    return {
        // recieve data
        fetch_user_data: () => dispatch(fetch_user_data()),

        // upload data
        add_comment: data => dispatch(add_comment(data)),
        reply_comment: data => dispatch(reply_comment(data))
    };
};

重复操作：

export const add_comment = data => {
    return dispatch => {
        dispatch(sendComment());

        const headers = {
            method: 'POST',
            body: JSON.stringify({ query: mutations.create_comment(data) }),
            headers: {
                'Content-Type': 'application/json'
            }
        };

        return fetch('http://192.168.43.200:5000/graphql', headers).then(
            res => {
                dispatch(requestCommentFinished());
                return res.json();
            }
        );
    };
};

成品异径管：

const requestCommentFinished = state => {
    const isSendingComment = false;
    return updateObject(state, {
        isSendingComment
    });
};

---

嗯，你能发一些代码吗？您可能在顶层错误地更新了

状态

。请同意@Colin。你没有正确使用状态/道具，因为你的渲染是在顶级组件中触发的。如果只有一个数据更改，它不会触发顶级组件渲染吗？我刚刚编辑了问题，包括更多代码。如果还有什么需要补充的，请告诉我