Question

在我的react-redux应用程序中，我能够通过界面正确地更新一些数据，如下面的gif所示。以下是更改redux状态的相应代码：

case UPDATE_COMMENT_SUCCESS:
        const commentUpdated = action.payload.normalizedData;
        return {
            ...state,
            loading: false,
            editing: false,            
            discussionPosts: {
                ...state.discussionPosts,
                [commentUpdated.id]: {
                    ...state.discussionPosts[commentUpdated.id],
                    content: commentUpdated.content
                }
            }
        };

下面是单击的按钮的onclick事件：

const onSubmit_updateComment = (event) => {
    event.preventDefault();
    props.updateComment({
        Id: st_activeCommentToEdit,
        Content: st_commentTextEdit,
        UserId: currentUserId
    });
    set_activeCommentToEdit('');
}

下面是更新数据库的代码（即下面代码中的props.updateComment）：

export function UpdateComment(commentData) {
    return dispatch => {

        dispatch(dataOperationBegin());

        axios({
            method: 'post',
            url: 'api/AssessmentDiscussionPost/Update',
            data: {
                Id: commentData.Id,
                Content: commentData.Content,
                PostOwnerId: commentData.PostOwnerId
            }
        })
            .then(response => {
                console.log('success: Updated the comment');
                console.log(response.data);

                dispatch(updateCommentSuccess(response.data));

                toaster.notify('Comment is posted successfully.', {
                    duration: 2000
                })
            })
            .catch(error => { dataOperationFailure(error) });
    };
}

我尝试不使用toaster.notify，但仍然存在相同的问题。

这是主要组件中首次加载数据的代码：

useEffect(() => {
    if (props.loading == false)//when the loading is complete
    {
        props.fetchReviewAlignPerspectivesdCardData(submissionId);
    }

}, [submissionId])

我不认为fetchReviewAlignPerspectivesdCardData是闪烁的原因（因为在更新字段时再也不会调用它了）。我想知道可能是这个问题的原因。有什么想法吗？

Answer 1

没有完整的代码很难复制，但是看起来您不小心提交了一个表单，可以通过设置<button type="button">...来解决（否则，默认情况下它将是一个提交按钮）或通过在表单上设置e.preventDefault。

Answer 2

大多数情况下，闪烁是由于视口（它是您的div / body）元素的高度与屏幕尺寸相同而引起的。发生这种情况时，您的浏览器将在页面中添加/删除滚动。因此，您可以减小元素的高度，该高度将删除滚动或增加为具有永久滚动。

在react-redux应用程序中更新部分状态时，整个页面都会闪烁并跳到顶部

2 个答案: