Reactjs 当react redux应用程序中的一部分状态更新时,整个页面会闪烁并跳转到顶部
在我的react redux应用程序中,我可以通过一个界面正确地更新一些数据,如下面的gif所示。以下是更改redux状态的相应代码:Reactjs 当react redux应用程序中的一部分状态更新时,整个页面会闪烁并跳转到顶部,reactjs,redux,react-redux,Reactjs,Redux,React Redux,在我的react redux应用程序中,我可以通过一个界面正确地更新一些数据,如下面的gif所示。以下是更改redux状态的相应代码: case UPDATE_COMMENT_SUCCESS: const commentUpdated = action.payload.normalizedData; return { ...state, loading: false, editing: fal
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
}
}
};
下面是单击按钮的一次单击时间:
const onSubmit_updateComment = (event) => {
event.preventDefault();
props.updateComment({
Id: st_activeCommentToEdit,
Content: st_commentTextEdit,
UserId: currentUserId
});
set_activeCommentToEdit('');
}
以下是触发onSubmit\u 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>
我尝试不使用烤面包机。通知
,但同样的问题仍然存在
以下是第一次加载数据的主组件中的代码:
useEffect(() => {
if (props.loading == false)//when the loading is complete
{
props.fetchReviewAlignPerspectivesdCardData(submissionId);
}
}, [submissionId])
以下是分派到道具的映射:
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) });
}
}
我不认为fetchReviewAlignPerspectivesCardData
是闪烁的原因(因为当字段更新时,不再调用它)。我想知道这个问题的原因是什么。有什么想法吗
更新
看来`
export const DATAOPERATION_BEGIN = "DATAOPERATION_BEGIN";
export const dataOperationBegin = () => ({
type: DATAOPERATION_BEGIN
})
这是案例数据操作_BEGIN
的减速器代码,其中加载
设置为真
:
const alignPerspectivesReducer = (state = initialState, action) => {
switch (action.type) {
case DATAOPERATION_BEGIN:
return { ...state, loading: true, error: null };
我想知道我分派
dataOperationBegin
的方式是否有问题。有什么想法吗 如果没有完整的代码,很难复制,但看起来您是无意中提交了表单,可以通过设置…
(否则,默认情况下它将是一个提交按钮)来解决此问题或者在表单上设置e.preventDefault
。使用chrome中的react开发者工具,查看所有发生的事件updateCommentSuccess
看起来像什么?@Andrew非常基本:export const updateCommentSuccess=(normalizedData)=>({type:UPDATE COMMENT\u SUCCESS,payload:{normalizedData})
请告诉我们按钮的onClick
处理程序触发了哪个函数。这里没有足够的代码来复制。
const alignPerspectivesReducer = (state = initialState, action) => {
switch (action.type) {
case DATAOPERATION_BEGIN:
return { ...state, loading: true, error: null };