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

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

这是触发 onSubmit_udatecomment 事件的表单:

 <form onSubmit={onSubmit_updateComment} className="mt-2">
     <div className="form-group">
         <textarea
             defaultValue={props.comments[commentId].content}
             value={st_commentTextEdit}
             className="form-control"
             onChange={onChange_commentTextEdit}
         />
     </div>

     <div className="float-right">
         <button className="btn btn-sm btn-info" type="submit">Update</button>&nbsp;
         <button
             className="btn btn-sm btn-light"
             type="reset" onClick={(e) => { e.preventDefault(); set_activeCommentToEdit(0) }}>
             Cancel
         </button>
     </div>
     <div style={{ clear: 'both' }}></div>
 </form>

下面是更新数据库的代码(即下面代码中的 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])

这是调度到 Prop 的映射:

const mapDispatchToProps = (dispatch) => {
   return {
       fetchReviewAlignPerspectivesdCardData: (submissionId) => dispatch(FetchAlignPerspectivesData(submissionId)),
         }
}

此外，对数据库进行axios调用的FetchAlignPerspectivesData函数如下:

export function FetchAlignPerspectivesData(submissionId) {
    var url = 'api/x/y';

    return dispatch => {

        dispatch(alignPerspectivesDataOperationBegin);

        axios.get(url, { params: { submissionId } })
            .then(response => {

                const alignPerspectives = new schema.Entity('alignPerspectives');
                const assessments = new schema.Entity('assessments');
                const discussionPosts = new schema.Entity('discussionPosts');
                const childPosts = new schema.Array(discussionPosts);
                discussionPosts.define({
                    childPosts: [childPosts]
                });

                alignPerspectives.define({
                    assessments: [assessments],
                    discussionPosts: [discussionPosts]
                });

                const normalizedData = normalize(response.data, alignPerspectives);
                dispatch(fetchAlignPerspectivesCardSuccess(normalizedData))
            })
            .catch(error => { alignPerspectivesDataOperationFailure(error) });
    }
}

我不认为 fetchReviewAlignPerspectivesdCardData 是闪烁的原因(因为更新字段时永远不会再次调用它)。我想知道这个问题的原因可能是什么。有什么想法吗？

更新

似乎`

export const DATAOPERATION_BEGIN = "DATAOPERATION_BEGIN";
export const dataOperationBegin = () => ({
    type: DATAOPERATION_BEGIN
})

这是case DATAOPERATION_BEGIN的reducer代码，其中loading设置为true:

 const alignPerspectivesReducer = (state = initialState, action) => {
     switch (action.type) {
         case DATAOPERATION_BEGIN:
             return { ...state, loading: true, error: null };

我想知道我调度dataOperationBegin的方式是否有问题。有任何想法吗？

Answer 1

如果没有完整的代码，很难重现，但看起来您不小心提交了表单，这可以通过设置 <button type="button">... 来修复。 (否则，默认情况下它将是提交按钮)或通过设置 e.preventDefault在表格上。