Question

我的应用程序我希望用户能够发表评论并喜欢帖子。所以我创建了一个具有以下结构的组件树

顶级组件
- 查看组件
  - 顶栏
  - 车身
    - 作者卡
    - 明信片
    - 评论秒
    - 像按钮组件一样浮动

加载顶部组件时，会获取数据。虽然它取出主体组件会显示预加载器。获取后，它将数据发送到（user_data）视图 - ＆gt; topbar和（post_data）视图 - ＆gt;身体。一切正常，直到我试着发表评论。评论组件将评论发送到正文 - ＆gt;查看 - ＆gt;最佳。重新渲染后再次显示预加载器。当我点击“赞”按钮时也会发生这种情况。他们是一种避免这种情况的方法吗？提前谢谢

编辑：

顶级组件添加评论：评论组件中的数据

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))
    };
};

redux-action：

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();
            }
        );
    };
};

requestCommentFinished reducer：

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

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

0 个答案: