javascript - 过滤对象，调整并替换

Question

我有一个初始化为 state 的 fieldNames 数组。从 API 调用中填充后，它看起来像这样:

[
  { name: "joe",  type: "string" },
  { name: "bob",  type: "string" },
  { name: "mike", type: "string" }
];

在这种情况下，我只关心 name 键，因为我在复选框函数中使用它来跟踪 selectedFields。

表示checkbox函数:

checkbox = ({ name, isChecked }) => {
  //handle check box of each fieldName
  const obj = this.state.fieldNames.find(field => field.name === name);
  if (isChecked === true) {
    //checked conditional
    this.setState({
      selectedFields: {
        ...this.state.selectedFields,
        [name]: { ...obj }
      }
    });
  } else {
    const newSelectedFields = this.state.selectedFields;
    delete newSelectedFields[name];
    this.setState({
      selectedFields: newSelectedFields
    });
  }
};

所以我在这里设置状态的方式是立即获取选定的名称并将其变成一个对象，这不是我想要的。最终数据类型/结构无效，无法通过我的 API 发送。

例如它最终看起来像这样:

"selectedFields": {
  "joe": {},
  "bob": {}
}

然而，我需要它看起来像下面这样。这些对象还增加了额外的值(value)，但这与实现这一目标是分开的(我认为)。

[
  { name: "joe" },
  { name: "bob" }
];

Answer 1

重构你的功能

checkbox = ({ name, isChecked }) => {
  if (isChecked)
    this.setState({selectedFields: [ ...this.state.selectedFields, { name }]});
  else   
    this.setState({ selectedFields: this.state.selectedFields.filter(f => f.name !== name)});
};

您犯的一个主要错误是在对象文字 { ... } 中使用展开运算符，而不是在数组 [ ... ] 中使用。在 else 条件下，您也未能使用扩展运算符并将状态设置为同一对象，这可能会阻止 React 重新渲染，因为它可能无法检测到状态的变化。随着对象的改变，不再可以使用删除，而是使用过滤器。此外，如果您只需要名称字段，则无需在 fieldNames 上使用查找，因为名称已传递给函数。

(我还不得不压缩你的函数，因为我习惯阅读尽可能短的代码)

编辑:有些人喜欢走得更短

checkbox = ({ name, isChecked }) => this.setState({selectedFields: isChecked ? [ ...this.state.selectedFields, { name }] : this.state.selectedFields.filter(f => f.name !== name) });