从redux调用'UPDATE_DATA'操作时状态变为未定义

ztmd8pv5 于 2023-08-05 发布在其他

关注(0)|答案(2)|浏览(100)

下面是react reducer的代码。当我更新数据时，状态变为“未定义”。

const intialState = { data: JSON.parse(localStorage.getItem('formData')) || [] };

const formReducer = (state = intialState, action) => {
  switch (action.type) {
    case 'ADD_DATA':
      return { ...state, data: [...state.data, action.payload] };
    case 'UPDATE_DATA':
      {
        console.log('form update data dispatch', action.payload);
        const { id, data } = action.payload;
        const newData = state.data;
        newData.map((item, index) => {
          if (item[0].uid == id) {
            alert(item[0].uid === id);
            newData[index] = data;
            return (state.data = newData);
          }
        });
      }
      break;
    default:
      return state;
  }
};

export default formReducer;

字符串
我正在使用useSelector()来获取更新的数据。

redux

来源：https://stackoverflow.com/questions/76646281/state-becomes-undefined-while-calling-update-data-action-from-redux

2条答案

按热度按时间

wwwo4jvm1#

在UPDATE_DATA的情况下，您不会返回更新的状态。这导致状态变为undefined。map回调中的return语句返回数组中的项，而不是状态。
你可以这样重写这个案例：

case 'UPDATE_DATA': {
  const { id, data } = action.payload;
  return {
    ...state,
    data: state.data.map(item => {
      return item.uid === id ? data : item;
    }),
  };
}

字符串

赞(0）回复(0）举报 2023-08-05

3pvhb19x2#

在UPDATE_DATA reducer案例中有几个问题：
1.next 状态值不会从case返回，因此在处理此操作时，状态将是未定义的。

Array.prototype.map返回一个数组，它的回调应该是一个纯函数，它不应该用来改变外部引用或它正在迭代的数组。
newData是对当前state.data的引用，因此reducer的情况也会改变当前状态，而不是返回 * 新的 * 状态/数组引用。
更正确的实现应该如下所示：

case 'UPDATE_DATA':
  const { id, data } = action.payload;
  const newData = state.data.map((item) => { // <-- return new array reference
    if (item[0].uid == id) {
      return data;
    }
    return item;
  });
  return newData; // <-- return next state value

字符串
或者更简洁一点：

case 'UPDATE_DATA':
  const { id, data } = action.payload;
  return state.data.map((item) => item[0].uid == id ? data : item);

型

赞(0）回复(0）举报 2023-08-05

我来回答

从redux调用'UPDATE_DATA'操作时状态变为未定义

2条答案

相关问题

热门标签

最新问答