reactjs - 在 react-redux 应用程序中更新部分状态时,整个页面闪烁并跳转到顶部
问题描述
在我的 react-redux 应用程序中,我可以通过一个界面正确更新一些数据,如下图所示。下面是更改 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>
<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])
这是调度到道具的映射:
const mapDispatchToProps = (dispatch) => {
return {
fetchReviewAlignPerspectivesdCardData: (submissionId) => dispatch(FetchAlignPerspectivesData(submissionId)),
}
}
此外,FetchAlignPerspectivesData
使 axios 调用数据库的函数如下:
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
,其中loading
设置为true
:
const alignPerspectivesReducer = (state = initialState, action) => {
switch (action.type) {
case DATAOPERATION_BEGIN:
return { ...state, loading: true, error: null };
我想知道我的派送方式dataOperationBegin
是否有问题。有任何想法吗?
解决方案
没有完整的代码很难重现,但看起来你不小心提交了一个表单,这可以通过设置<button type="button">...
(否则,默认情况下它将是一个提交按钮)或通过e.preventDefault
在表单上设置来解决。
推荐阅读
- ios - Swift 4 和 Firebase 消息在收到时被复制
- java - 如何解决此 UnsatisfiedLinkError?
- date - 如何编写 sql 查询以根据时间戳从数据库中获取数据
- websocket - 使用 paho-mqtt (JavaScript) 连接到 Solace
- vue.js - 如何将我的变量 SCSS 导入 Webpack 以供全球使用。(Vue)
- swift - 更改 UICollectionView 单元格颜色 onTap
- python - 如何在 Python 中创建从 Pub/Sub 到 GCS 的数据流管道
- reactjs - React 组件第二次渲染问题
- assembly - x86-64 GAS Intel 语法中的“[RIP + _a]”等 RIP 相对变量引用如何工作?
- r - 为什么 R 打印我的 csv 文件的“级别”,我该如何摆脱它?