以下是Reaction 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()来获取更新的数据.

推荐答案

UPDATE_DATA的情况下,您不会返回更新后的状态.这导致该州变成了undefined.map回调中的return语句返回数组中的项,而不是状态.

你可以像这样重写这个 case :

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

Reactjs相关问答推荐

sourceBuffer. appendBuffer成功,但h5视频播放器卡住了

包装组件可以避免子组件重新渲染.?

无法在主组件的返回语句中呈现预期组件

在url中使用MongoDB对象ID被认为是不好的做法?

React Router:在没有手动页面刷新的情况下,路由不会更新内容

试图从Amazon-Cogito-Identity-js模拟CogitoUser.authateUser,并将其获取为未定义的S

在ReactJS的monaco编辑器中添加美人鱼语法

我无法通过 useContext 显示值

console.logs 没有显示在浏览器控制台上,但显示在我的终端上

标签文本删除了 MUI 概述的输入

ReactJS中使用setState方法时,Context内部的State未进行更新

为什么我的 Next.js (React) 组件只有在页面中时才有效?

在复选框中react 检索选中的值

将 ref 赋予功能组件以使用内部功能

React - 仅在变量为真时显示项目

导航到屏幕时,react 本机上下文状态变为未定义

如何制作基于对象 struct 呈现数据的可重用组件?

如何实现两个 SVG 形状相互叠加的 XOR 操作?

错误未捕获的错误:[App] 不是 组件. 的所有子组件必须是

我想将悬停 colored颜色 更改为红色.写了一个话题,这个元素没有react ,怎么解决呢?