如何根据 ES6/React 中的条件更改对象键的值答案

【问题标题】：How do I change the value of the object's keys depending on the condition in ES6/React如何根据 ES6/React 中的条件更改对象键的值
【发布时间】：2021-11-04 05:47:03
【问题描述】：

如何根据条件更改对象键的值。构建和编码的最佳方式是什么？

数据

const newData = {
  id: 111,
  name: "ewfwef",
  description: "Hello",
  step: 0
};

代码

.then((res)) => {
    switch(res.data.status) {
        case 'data_added': {
           step = 1;
           break;
        }
        case 'product_added': {
           step = 2;
           break;
        }
        case 'consumer_added': {
            step = 3;
            break;
         }
         case 'water_added': {
            step = 4;
            break;
         }
         case 'things_added': {
            step = 5;
            break;
         }
         case 'funky_added': {
            step = 6;
            break;
         }
        default: {
           step = 1;
           break;
        }
     }

    const data = Object.keys(newData).map((key) => ({ key, value: newData[key] }));
}

条件

step value should be replace based on this condition:

'data_added'    = 1
'product_added' = 2
'consumer_added' = 3
'water_added'   = 4
'things_added' = 5
'funky_added'  = 6

预期输出

[
  {
    key: id,
    value: 111
  }, 
  {
    key: name,
    value: 'ewfef'
  },
  {
    key: description,
    value: 'Hello'
  },
  {
    key: step,
    value: 2
  }
]

【问题讨论】：

res.data , steps 和 newData 的关系是什么
@vaira。 res.data.status 是我从 API 获得的状态。取决于status，step 的值取决于那个

标签： javascript reactjs ecmascript-6 react-hooks

【解决方案1】：

如果我很好理解：您想更新 newData.step 以将其设置为您的 res.data.status 吗？

由于您的案例众所周知，我会这样做：


const STEPS = {
    'data_added' : 1,
    'product_added' : 2,
    'consumer_added' : 3,
    'water_added' : 4,
    'things_added' : 5,
    'funky_added' : 6
};

const newData = {
  id: 111,
  name: "ewfwef",
  description: "Hello",
  step: 0
};

/*...*/.then((res)) => {
    newData.step = STEPS[data.res.status];
    
    const data = Object.keys(newData).map((key) => ({ key, value: newData[key] }));

});

我不明白的是这一行：const data = Object.keys(newData).map((key) => ({ key, value: newData[key] }));

您所做的是列出 newData 键，然后返回每个属性的键/值对数组。这是你的问题的一部分吗？

在这种情况下，您可能希望仅在此键/值对数组中替换 step 属性以用于 step 属性。所以，那么你应该做这样的事情：

/*...*/.then((res)) => {
    const data = Object.keys(newData).map((key) => {
        if(key === 'step') return { key, value : STEPS[data.res.status] };
        else return { key, value: newData[key] };
    );

});

【讨论】：

const data = Object.keys(newData).map((key) => ({ key, value: newData[key] })); 应该是EXPECTED OUTPUT
@Joseph 您的问题有些不清楚。您询问“如何根据条件更改对象键的值”。我的第一个示例解决了这一点。我的回答为您提供了您想要的。如果您希望您的输出是这样的，只需在我的第一个示例之后添加您的行。不必将 SO 答案复制/粘贴到您的代码中，而是帮助您了解实现目标所需要做的事情。如果这个答案不符合您的需要，可能是因为您没有正确地提出问题。

【解决方案2】：

也许你可以使用一个对象来将状态映射到步骤：

var stepMap = {
    "data_added": 1,
    "product_added": 2,
    "consumer_added": 3,
    "water_added": 4,
    "things_added": 5,
    "funky_added": 6
}

然后，以这种方式使用它，

.then((res)) => {
    const status = res.data.status;
    if (stepMap[status]) { //checks if the response status is part of our map
      newData.step = stepMap[status];
    }

    const data = Object.keys(newData).map((key) => ({ key, value: newData[key] }));
    console.log(data);
  }):

【讨论】：

请检查我的问题。我已经输入了预期的输出。我的const data = Object.keys(newData).map((key) => ({ key, value: newData[key] })); 呢？
更新了答案。只需在我的代码之后添加您的代码

【解决方案3】：

在我看来，您试图管理一些复杂的状态。既然你在使用 React，为什么不使用 reducer？

https://reactjs.org/docs/hooks-reference.html#usereducer

根据您的用例，您可能还会发现上下文模块模式很有趣。再加上编写良好的 reducer 和操作，它可以使您的有状态逻辑可重用，同时为您使用操作和通量模式对状态进行这些更新提供一个自然的场所。您可以在此处查看上下文模块模式的示例：

https://github.com/ashkan-pm/react-context-module-pattern

我还建议您查看 Kent C. Dodds 的一些博客文章：

https://kentcdodds.com/blog/the-state-reducer-pattern-with-react-hooks https://kentcdodds.com/blog/how-to-use-react-context-effectively

【讨论】：