Javascript 在调度之间改变redux状态

我正在使用React和Redux并尝试从组件分派操作，但出现以下错误：

AJAX调用不变冲突：在路径

仪表板.categories.0.onClick

中，在调度之间检测到状态突变。这可能会导致不正确的行为。（）

您可以假设以下情况：

menu = [
  {title: "video", onClick: false},
  {title: "gif", onClick: false},
  {title: "website", onClick: false}
];

title = 'video';

以下是正在使用的组件功能：

itemCheck() {
  const {menu, title, actions} = this.props;
  actions.updateCategoryClick(title, [...menu]);
}

export function updateMenuClick(item, menu) {
  return new Promise((resolve) => {
    const index = menu.findIndex((object => object.title === item));
    menu[index].onClick = !menu[index].onClick;
    resolve(menu);
  });
}

重复操作：

export function updateCategoryClickSuccess(categories) {
  return {type: actionTypes.UPDATE_CATEGORY_CLICK_SUCCESS, categories};
}

export function updateCategoryClick(category, categories) {
  return function(dispatch) {
    dispatch(beginAjaxCall());
    return Utils.updateMenuClick(category, categories)
      .then(categories => {dispatch(updateCategoryClickSuccess(categories));})
      .catch(error => {dispatch(ajaxCallError(error));});
  };
}

以及正在使用的效用函数：

itemCheck() {
  const {menu, title, actions} = this.props;
  actions.updateCategoryClick(title, [...menu]);
}

export function updateMenuClick(item, menu) {
  return new Promise((resolve) => {
    const index = menu.findIndex((object => object.title === item));
    menu[index].onClick = !menu[index].onClick;
    resolve(menu);
  });
}

问题:

---

如果事实上我发送的不是原始状态（在本例中为

菜单

），而是状态的新副本（在本例中为

[…菜单]

），为什么会有人告诉我在发送之间发生状态突变？我该如何解决这个问题？谢谢大家

[…menu]

创建一个浅层副本，因此

此.props.menu[index]

和

[…menu][index]

仍在引用同一对象

尝试替换

菜单[索引].onClick=！菜单[索引]。用以下命令单击

：

menu[index] = { ...menu[index], onClick: !menu[index].onClick }

不过，在减速器中执行此逻辑可能更好

---

另外，在您的

更新单击中返回承诺是没有意义的，因为它不是异步的。
[…菜单]
创建了一个浅拷贝，因此
这个。props.menu[index]
和
[…菜单][index]
仍然引用同一对象

尝试替换
菜单[索引].onClick=！菜单[索引]。用以下命令单击
：

menu[index] = { ...menu[index], onClick: !menu[index].onClick }

不过，在减速器中执行此逻辑可能更好

另外，在
updateNuclick
中返回承诺有点毫无意义，因为它不是异步的。
异步意味着至少两个事件同时发生，对吗？因此，承诺确保对于异步事件，当多个事件同时发生时，在所有操作完成且不再挂起之前，不会返回每个单独的项，对吗？（只是试着教我自己，弄明白这件事）。如果是这样的话，我想我实际上需要承诺，因为我可能会让子组件同时调用此操作。您可以在
updateNuclick
中创建一个承诺以等待异步操作，但其中没有承诺。将其包装在承诺中不会影响函数外部发生的其他异步事件。这是一个复杂的主题，请阅读更多关于JS中异步和事件循环的内容。构造新的承诺只是替换回调的语法糖分（例如在
setTimeout
），它没有任何实际效果，所以在完全理解它之前请避免它。如果这些文章还不够，请阅读和和谷歌的类似主题。异步意味着至少两个事件同时发生，对吗？因此，承诺确保对于异步事件，当多个事件同时发生时，在所有操作完成且不再挂起之前，不会返回每个单独的项，对吗？（只是试着教我自己，弄明白这件事）。如果是这样的话，我想我实际上需要承诺，因为我可能会让子组件同时调用此操作。您可以在
updateNuclick
中创建一个承诺以等待异步操作，但其中没有承诺。将其包装在承诺中不会影响函数外部发生的其他异步事件。这是一个复杂的主题，请阅读更多关于JS中异步和事件循环的内容。构造新的承诺只是替换回调的语法糖分（例如在
setTimeout
），它没有任何实际效果，所以在完全理解它之前请避免它。如果这些文章不够，请阅读和谷歌搜索类似的主题。