更新反应状态而不覆盖以前的状态

Question

我正在尝试使用多维数组更新状态值，但我似乎无法弄清楚如何在不影响我稍后在过程中使用的先前状态值的情况下更新其中一个数组对象键值派遣电话。我在有效载荷下方的代码携带了一个 ids（节点）数组，我循环遍历它并仅更改状态对象中的那些对象。相当简单，但是更新对象的多维数组而不影响状态让我感到困惑。


    UPDATE_RESTRICTION: (curState, payload) => {
    
      const updatedNodes = {...curState.layout}
      const accessProfile = BpUAE.accessProfileID
    
      payload.nodes.forEach((node, index) => {
    
    
        if (typeof (updatedNodes[node].settings.bp_uae_restrictions) === 'undefined') {
          updatedNodes[node].settings.bp_uae_restrictions = {};
        }
    
        if (typeof (updatedNodes[node].settings.bp_uae_restrictions[accessProfile]) === 'undefined') {
          updatedNodes[node].settings.bp_uae_restrictions[accessProfile] = {};
        }
    
    
        updatedNodes[node].settings.bp_uae_restrictions[accessProfile].is_node_restricted =  JSON.parse(payload.isRestricted);

       })

    
      return {layout: updatedNodes}
    
    
    }

如果您需要更多信息，请告诉我，感谢您提供的任何帮助。

Answer 1

检查你的 return 声明，你必须包括你以前的状态并覆盖布局，如下所示。

 return {...curState, layout: updatedNodes}

Answer 2

您没有正确应用不可变更新模式，您正在改变指向当前状态对象的嵌套引用。您需要创建新的对象引用并浅拷贝所有正在更新的状态。

UPDATE_RESTRICTION: (curState, payload) => {
  const updatedNodes = { ...curState.layout }
  const accessProfile = BpUAE.accessProfileID;

  payload.nodes.forEach((node, index) => {
    if (typeof (updatedNodes[node].settings.bp_uae_restrictions) === 'undefined') {
      updatedNodes[node] = {
        ...updatedNodes[node],
        settings: {
          ...updatedNodes[node].settings,
          bp_uae_restrictions: {},
        },
      };
    }

    if (typeof (updatedNodes[node].settings.bp_uae_restrictions[accessProfile]) === 'undefined') {
      updatedNodes[node] = {
        ...updatedNodes[node],
        settings: {
          ...updatedNodes[node].settings,
          bp_uae_restrictions: {
            ...updatedNodes[node].settings.bp_uae_restrictions,
            [accessProfile]: {},
          },
        },
      };
    }

    // now all the new references have been created and previous
    // state shallow copied, you can update the deeply nested 
    // `is_node_restricted` property.
    updatedNodes[node].settings.bp_uae_restrictions[accessProfile].is_node_restricted = JSON.parse(payload.isRestricted);
  });

  return {
    ...curState,
    layout: updatedNodes,
  };
}

更新：添加了最后一个不可变模式

  const updatedNodes = { ...curState.layout }
  const accessProfile = BpUAE.accessProfileID;

  payload.nodes.forEach((node, index) => {
    if (typeof (updatedNodes[node].settings.bp_uae_restrictions) === 'undefined') {
      updatedNodes[node] = {
        ...updatedNodes[node],
        settings: {
          ...updatedNodes[node].settings,
          bp_uae_restrictions: {},
        },
      };
    }

    if (typeof (updatedNodes[node].settings.bp_uae_restrictions[accessProfile]) === 'undefined') {
      updatedNodes[node] = {
        ...updatedNodes[node],
        settings: {
          ...updatedNodes[node].settings,
          bp_uae_restrictions: {
            ...updatedNodes[node].settings.bp_uae_restrictions,
            [accessProfile]: {},
          },
        },
      };
    }

    // now all the new references have been created and previous
    // state shallow copied, you can update the deeply nested 
    // `is_node_restricted` property.
    updatedNodes[node] = {
      ...updatedNodes[node],
      settings: {
        ...updatedNodes[node].settings,
        bp_uae_restrictions: {
          ...updatedNodes[node].settings.bp_uae_restrictions,
          [accessProfile]: {
            ...updatedNodes[node].settings.bp_uae_restrictions[accessProfile],
            is_node_restricted:  JSON.parse(payload.isRestricted)
          },
        },
      },
    };
  });

  return {
    ...curState,
    layout: updatedNodes,
  };
}```

更新反应状态而不覆盖以前的状态

Update react state without overriding previous state

arrays

reactjs

state

dispatch

payload