Reactjs / Redux Edit功能無效

Question

我構建了一個應用程序並添加了CRUD功能，除編輯功能外，一切正常。 問題是當我嘗試編輯其實際命中正確的數據庫並更新條目但在反應應用程序中它只是強制將所有條目更新為特定的一個條目。

更新Saga： -

 function* updateFeedbackSaga(action) { try { const updateData = yield call(api.feedback.edit, action.payload); yield put(actions.updateFeedback(updateData)); console.log(updateData); } catch (err) { yield put(actions.updateFeedbackErrors(err.response.data)); } } 

編輯Reducer

 import * as actionTypes from "../Actions/types"; const initialState = { feedbacks: [], feedback: {}, loading: false }; export default (state = initialState, action) => { switch (action.type) { case actionTypes.UPDATE_FEEDBACK: return { ...state, feedbacks: state.feedbacks.map( feedback => feedback.id === action.payload.id ? action.payload : feedback ) }; default: return state; } }; 

操作

 //Edit and update Feedback export const updateFeedbackRequest = newFeedbackData => ({ type: actionTypes.UPDATE_FEEDBACK_REQUEST, payload: newFeedbackData }); export const updateFeedback = updatedData => ({ type: actionTypes.UPDATE_FEEDBACK, payload: updatedData }); export const updateFeedbackErrors = errors => ({ type: actionTypes.GET_ERRORS, payload: errors }); 

這就是印刷方式

 <section className = "feedback"> <div className = "employees__table" > <h4 className = "semi-heading" > Feedback Table < /h4> { FeedbackList feedbacks = {feedbacks} /> } </div> </section > const mapStateToProps = state => ({ feedbackList: selectors.FeedbackSelector(state) }); 

這是圖像

這是我的反饋清單

如果我編輯第一個項目，那么狀態就是這樣

我的反饋列表正在重復編輯反饋。 我不知道我在哪里做錯了。

這是我的數據庫

這是工作代碼：

https://codesandbox.io/s/github/montygoldy/employee-review/tree/master/client

登錄：montyjatt@gmail.com密碼：12345678

Answer 1

當你已經知道我已經知道更新后，你是否需要遍歷所有反饋？

case actionTypes.UPDATE_FEEDBACK:
 return { 
    ...state,
    feedbacks[action.payload.id]: action.payload.body
    };

這只會更新單個項目，因為ID是密鑰的一部分。 您當前的反饋方式將全部替換為與ID匹配的單個值。

如果您計划發送多個ID，那么您將需要使用擴展運算符。

case actionTypes.UPDATE_FEEDBACK:
 return { 
    ...state,
    feedbacks: {
        ...state.feedbacks,    
        ...action.payload
     }
  };

在這種情況下，您將分散舊的反饋項，然后使用帶有擴展運算符的新有效負載來僅覆蓋具有匹配ID的那些。

當然這意味着action.payload應該與您的反饋結構相匹配。

Answer 2

好的我已經找到了修復，實際上，它是我在減速器中的id引用是不正確的。

正確的方法是

 case actionTypes.UPDATE_FEEDBACK: return { ...state, feedbacks: state.feedbacks.map( feedback => feedback._id === action.payload._id ? action.payload : feedback ) };