Javascript 与「；U"；（更新）减速器中的部分积垢

我一直在做一个没有多余积垢的项目。结合使用contextAPI/挂钩创建类别列表。我已经成功了，“CR和D”（创建、读取和删除）部分，但与“U”（更新）部分斗争，我无法在提交更新更改后使其工作

从我如何处理减速器部件开始

reducer.js

从“uniqid”导入uniqid；
导出常量类别导出器=（状态、操作）=>{
开关（动作类型）{
案例“添加类别”：
返回[
……国家，
{
id:uniqid（），
名称：action.name，
后缀：action.suffix
}
];
//**我的问题**
“更新类别”案例：
返回(
state.findIndex（item=>item.id==action.id），
state.slice（0，action.id，action.name，action.suffix）
);
“删除类别”案例：
返回状态.filter（item=>item.id！==action.id）；
违约：
返回状态；
}
};

由于我没有问题，因此可以忽略

'ADD\u CATEGORY'

和

'DELETE\u CATEGORY'

。

'UPDATE\u CATEGORY'

对我来说有点粗略，我感觉语法不正确。据我了解，为了进行更新更改。所选项目需要从阵列扫描到匹配的id。id匹配后，可以在提交后更新更改。我不确定我是否能想出如何添加这种语法

现在，编辑表单组件中包含dispatch inside

handleSubmit

函数

EditCategoryForm.js

import React，{useState，useContext，useffect}来自“React”；
//上下文
从“../contexts/CategoryContext”导入{CategoryContext}；
函数EditCategoryForm（）{
const{dispatch}=useContext（CategoryContext）；
/*不能让它工作*/
常量handleSubmit=（e，名称，后缀）=>{
e、 预防默认值（）；
派遣({
键入：“编辑_类别”，
名称
后缀
});
};
常量handleChange=e=>{
常量{name，value}=e.target；
setInputValue（prevState=>（{…prevState，[名称]：value}））；
};
返回(
编辑
提交更改
setEditing（false）}>取消
);
}
导出默认EditCategoryForm；

---

我认为，语法的实现是错误的。目标是根据输入值将

名称

和

后缀

分配为单独的值。我没有取得任何成功，最近我一直在努力。如何解决此问题？在减速器和调度程序中实现“U”（更新）部件的最佳实践或正确方法是什么？我们对您的帮助表示感谢

在更新案例中，我建议通过现有项目进行映射：

• 如果映射的项与更新的项具有相同的id，则将其替换
• 以其他方式保留现有项目

代码如下：

case 'UPDATE_CATEGORY':
  return state.map(item => {
    if (item.id === action.id) {
      return {...item, name: action.name, suffix: action.suffix };
    }
    return item;
  });

您初始化状态的部分丢失。我假设是这样的：

const [inputValue, setInputValue] = useState({name: '',  suffix: ''})

handleSubmit

函数接收单个参数（事件），您需要使用来自您的状态的值：

// remove the extra parameters
const handleSubmit = (e /*, name, suffix */) => {
    e.preventDefault();
    dispatch({
        type: 'UPDATE_CATEGORY',
        id: inputValue.id,
        name: inputValue.name,
        suffix: inputValue.suffix,
    });
};

如果我没有弄错的话，这将返回原始状态，并更新特定元素

或者你可以：

const newArr = state.map( obj => {
  if obj.id === action.id{
     obj['name'] = action.name;
     obj['suffix'] = action.suffix;
  }
  return obj
  });
return newArr;

---

谢谢你的回复。。。我试过你的方法，显然不管用。我是否正确设置了调度程序

dispatch（{type:'UPDATE_CATEGORY'，id:item.id，name:item.name，后缀：item.suffix}）？代码段中缺少某些部分：在这里声明
inputValue
和
setInputValue
。但是您稍后会使用这些，所以我更新了我的答案：
dispatch
使用来自本地状态的值。在dispatcher中做了一些更改后仍然很困难，提交后没有更新更改。也许点击这个可以让你了解我的设置方式。也许您可以从中找到缺少的内容。
id
仍然缺少操作负载。将行
id:inputValue.id，
添加到
dispatch
调用参数。我已经分叉并更新了您提供的Codesandbox示例。我明白了，这是有意义的。现在它工作了！谢谢你的时间，真的很感激！这可能行得通，我以后会记住的。谢谢分享。
const newArr = state.map( obj => {
  if obj.id === action.id{
     obj['name'] = action.name;
     obj['suffix'] = action.suffix;
  }
  return obj
  });
return newArr;