Question

我有一个初始化为状态的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": {}
}

我需要它看起来像下面的样子。这些对象还有其他价值，但这与实现这一目标是分开的。

[
  { 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上使用find，因为名称已经传递给函数。

（我还不得不压缩您的函数，因为我习惯于阅读尽可能短的代码）

编辑：有些人喜欢更短

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

Answer 2

关闭代码：您需要确保以所需的格式保存文件，并通过其属性值（名称）删除正确的元素

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 }
      ]
    });
  } else {
    const newSelectedFields = this.state.selectedFields;
    newSelectedFields.splice(newSelectedFields.findIndex(obj => obj.name === name), 1);
    this.setState({
      selectedFields: newSelectedFields
    });
  }
};

过滤对象，调整并更换

2 个答案: