Javascript 我无法使“选择”使用新的子组件填充组件并保留其值

好吧，复杂的一个。我会尽量简单

我正在构建一个应用程序来创建json查询，然后将其发送到服务器

用于构建查询的组件位于嵌套结构中：QueryContainer>QueryGroup>QueryRow>一系列表单组件：QueryRowSelectField用于进行选择的下拉菜单、QueryRowDateInput、QueryRowPackageTypeInput、QueryRowPackageSizeInput

其思想是，您有查询的“组”，每个查询都包含“行”，因此一个查询组可能包含三行，一行规定用户为“Dave”，另一行说明请求的packageType，另一行给出数据范围

每次添加、删除或更改组或行时，它都会更新上下文中名为“query”的对象，然后使用该对象填充前端，以便用户可以看到他们正在构建的查询

这一切似乎都很好。最后，我将大部分功能保留在“root”QueryContainer组件中，并使用props将其传递给QueryGroup、QueryRow和QueryRow组件

不过，我遇到了一个问题，无法解决

我无法确定如何在QueryRowSelectField中保留选定的值

选择下拉列表的代码如下所示：

  <select
    value={selectFieldState}
    name='field'
    onChange={(e) => {
      handleChange(e, changeFieldInRow, groupIndex, rowIndex);
    }}
    className='form-control form-control-sm'
  >
    {populateSelectField()}
  </select>

  const handleChange = (e, changeFieldInRow, groupIndex, rowIndex) => {
    let selectedValue = e.currentTarget.value;
    updateFieldsInGroup(groupIndex);
    changeFieldInRow(selectedValue, groupIndex, rowIndex);
    setSelectFieldState(selectedValue);
  };

选择选项存储为包含本地状态的标签和值的对象数组。 updateFieldsInGroup基本上会过滤掉当前选定的下拉选项，以便在启动下一行时它不会出现在选项中

最重要的是，所选选项被发送到selectFieldState，然后用于填充select中的value属性

如上所述，“选择”下拉列表在更改时不会保留其显示的值。其他一切似乎都很好。如果删除函数调用“changeFieldInRowselectedValue，groupIndex，rowIndex”，则该值将保留，但在进行选择时，行组件不会改变

如果我在handleChange中使用字符串设置selectFieldState，例如设置selectFieldState'user'；然后它保留该字符串值，但如果我尝试使用状态值，尽管该值显示在控制台的查询中，它只会返回默认值

因此，问题与changeFieldInRow有关。我怀疑当它重新命名时，它会删除现有值，因此不会保留任何符号，但在这种情况下，它应该删除硬编码的setSelectFieldState“user”；但事实并非如此

我一直在坚持这一点，如果有人能给我指出正确的方向，我将不胜感激

如果上述内容不清楚，则可以在以下位置找到文件：

当前的“工作”示例可以在这里找到：

3件需要指出的事情：

获取select by event.target.value的值，而不是event.currentTarget.value

由于您使用的是受控选择组件，因此每次更改时，您都需要使用useState提供的函数将该更改反映到本地状态：

您需要将所选字段包括到要填充的字段中，以便选择组件正确显示其标签

以下是工作演示：

---

我注意到您使用的映射函数不正确，请从Codesandbox中查找这些警告。在这种情况下，我想您应该改用forEach。

您可以将此发布在Codesandbox上，并提供可复制的步骤和所需的输出吗？当然可以。代码位于：。我想做的是保留所选值，以便在选择后在“选择字段”下拉菜单中显示，同时保留所有其他功能。即，如果我从下拉菜单中选择“用户”，我希望在下拉菜单中保留用户-此时默认为“包名”。我不知道你说的“可复制的步骤”是什么意思。恩，那真是太棒了。谢谢你花时间看这个。你所有的观点都记下来了。我对React还是个新手，我犯了很多错误，所以我真的很感谢你抽出时间来看看这个。最好的，Stef谢谢@Stef，我很高兴能帮助你，继续前进！

const handleChange = (e, changeFieldInRow, groupIndex, rowIndex) => {
 let selectedValue = e.target.value;
 setSelectFieldState(selectedValue); <- reflect the change to local state

 updateFieldsInGroup(groupIndex);
 changeFieldInRow(selectedValue, groupIndex, rowIndex);
 setSelectFieldState(selectedValue);
};