在创建新的小部件Reactjs、Redux时，在调度之间检测到状态突变

创建小部件列表时出错

如果我第一次点击小部件列表，我就能够创建小部件1

如果我为它创建另一个小部件，我会得到一个错误A状态突变

如果我创建了另一个小部件，我就能够在没有errorwidget 3的情况下创建小部件

错误：在路径``中的调度之间检测到状态突变。这可能会导致不正确的行为

代码

减速器

case types.ADD_NEW_WIDGET: {
  const newBoardList = state.boardList.map((item) => {
    if (item.boardId === action.selectedBoardId) {
      return {
        ...item,
        modifiedAt: Date.now(),
        widgetList: [...(item.widgetList || []), { widgetId: uuid(), ...action.newWidget }],
      };
    }
    return item;
  });
  return { ...state, boardList: [...newBoardList] };
}

行动

export const addWidget = (newWidget, selectedBoardId) => ({
type: types.ADD_NEW_WIDGET,
payload: { 
widget: newWidget,
boardId: selectedBoardId,
},
});

编辑：Bugs in action creator

尝试使用action.payload传递所有数据。您当前的属性名存在bug，并且您正在使用错误的顺序调用带有参数的操作创建者：

//动作创造者 export const addWidget=newWidget，selectedBoardId=>{//{ 开关widgetType{ case venn： 返回{ widgetName:`widget${this.state.widgetCount}`， widgetType:venn， leftTarget:， rightTarget:， leftTargetValue:0， rightTargetValue:0， 位置：{行：0，列：0} }; 违约： 返回{ widgetName:`Default${this.state.widgetCount}`， widgetType:venn， leftTarget:， rightTarget： }; } }; addWidget=widgetType=>{ const newWidget=this.getNewWidgetType； 这是我的国家 { widgetsList:[…this.state.widgetsList，newWidget]， isHidden:！this.state.isHidden， widgetCount:this.state.widgetCount+1 }, => this.props.storyboardActions.addWidget newWidget， this.props.selectedBoard.boardId ; }; 减速器

case types.ADD_NEW_WIDGET: {
  const newBoardList = state.boardList.map((item) => {
    if (item.boardId === action.selectedBoardId) {
      return {
        ...item,
        modifiedAt: Date.now(),
        widgetList: [...(item.widgetList || []), { widgetId: uuid(), ...action.newWidget }],
      };
    }
    return item;
  });
  return { ...state, boardList: [...newBoardList] };
}

case types.ADD_NEW_小部件：{ const newBoardList=state.boardList.mapitem=>{ 如果item.boardId==action.selectedBoardId{ const currentWidgetList=item.widgetList | |[]； 常量newWidgetList=[ …当前WidgetList， { widgetId:uuid， …action.newWidget } ]; 返回{ 项目 修改日期：Date.now， widgetList:newWidgetList }; } 退货项目； }; 返回{…状态，董事会名单：newBoardList}； }

---

对我来说，导致这个错误的一个常见错误是，当我从道具克隆到状态时

getFields(props) {
  return ((props.resources.fields && [...props.resources.fields]) || []).map(
    field => {
      field.checked = false;
      return field;
    }
  );
}

this.setState({ fields: getFields(props) });

在上面的示例中，字段是一个对象数组。我没有进行深度复制，而是使用[…props.resources.fields]进行了浅层复制

进行深度复制可以解决这个问题。因此，对于我的案例，我又进行了一次浅层复制，如下所示：

getFields(props) {
  return ((props.resources.fields && [...props.resources.fields]) || []).map(
    item => {
      const field = { ...item };
      field.checked = false;
      return field;
    }
  );
}

---

如果我没有错，组件数据将是正确的，只有操作和reducer发生了更改。您需要在组件中调度updateWidget操作，并检查reducer上的UPDATE_小部件类型。将名称和参数order.const{boardId，WIDGET}=action.payload；boardId在您调用它的组件中未定义。this.props.storyboardActions.updateWidget newWidget，this.props.selectedBoard.boardId。this.props.selectedBoard.boardId需要定义。仍然面临相同的问题