Question

我正在使用React和Redux并尝试从组件调度操作但是收到以下错误：

AJAX CALL Invariant Violation：在路径dashboard.categories.0.onClick中的调度之间检测到状态突变。这可能会导致错误的行为。（http://redux.js.org/docs/Troubleshooting.html#never-mutate-reducer-arguments）

您可以采取以下措施：

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

Redux Action：

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

正在使用效用函数：

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），而是发送一个状态的新副本（在此情况1}}）？我该如何解决这个问题？谢谢大家！

Answer 1

[...menu]会创建一个浅表副本，因此this.props.menu[index]和[...menu][index]仍在引用相同的对象。

尝试将menu[index].onClick = !menu[index].onClick替换为：

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

尽管在减速器中做这个逻辑可能会更好。

另外，在updateMenuClick中返回一个承诺有点没有意义，因为它不是异步的。

在调度

1 个答案: