Reactjs / Redux编辑功能不起作用

Question

我构建了一个应用程序并添加了CRUD功能，除编辑功能外，其他所有功能均正常运行。问题是当我尝试编辑其实际上命中正确的数据库并更新条目时，但是在react应用程序中，它只是强制将所有条目更新为特定的一个条目。

更新传奇：-

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

Edit 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
        )
      };