React/JSX：使用键/值对迭代对象答案

【问题标题】：React/JSX: Iterating through an object with key/value pairsReact/JSX：使用键/值对迭代对象
【发布时间】：2020-06-02 19:25:35
【问题描述】：

我有一个对象，我用它来跟踪在 UI 上选中了哪些复选框。

看起来像这样：

      checked: { key1: false, key2: false, key3: false, key4: false, key5: false, key6: false, key7: false, key8: false, key9: false, key10: false },

我需要能够遍历此对象并将某些值设置为真/假，具体取决于用户希望从 UI 中获得的行为。

我有两个问题：

有没有更优雅的方法来实例化它？
如何使用 Object.entries 方法来做到这一点？

我想做这样的事情，但它不起作用：


let obj = {k1: false, k2: false, k3: false}

Object.entries(obj).forEach(([key, value]) => {
    obj.value = true;
  console.log(`${key} ${value}`);

});

谢谢！

【问题讨论】：

根据行为将值设置为真/假是什么意思？将键/值对存储在数组或映射中可能比存储在不同的属性中更具可扩展性。
感谢您的回复。我正在为页面上的复选框设置“不选择”选项。如果用户单击“选择无”，我需要将对象中的所有项目设置为 false。如果用户单击“全选”，我需要将它们全部设置为 true。如果用户选择了其中一些，我需要更新对象中键/值对的布尔值，以反映哪些被选中，哪些未被选中。我已经更新了我的问题，尝试以我需要的方式使用 Object.entries。
你的例子有什么问题？
@TomMendelson console.log 的结果打印出所有带有false 值的键/值对

标签： javascript arrays reactjs mapping jsx

【解决方案1】：

回答你的问题-

这是存储多个检查布尔值的好方法，因为您可以使用对象解构来访问它们，例如 const { key1, key2, ... } = checked，恕我直言，这使代码更具可读性。
试试-

Object.entries(obj).forEach([key, value] => {
  // Set obj key/value
  obj[key] = true  // or use value here
})

参考-

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

【讨论】：

【解决方案2】：

如果您需要将对象中的所有值设置为true，您可以这样做

Object.keys(obj).forEach(key => obj[key] = true);

Object.keys 将在数组中返回该对象中的所有键。通过遍历该数组然后使用obj[key]，我们可以访问对象的每个键并将其设置为true

【讨论】：