使用parse和format使用react-final-form和react-select的条件下拉列表

Question

这是几个类似问题的后续问题，但是找到的解决方案（Erik Rasmussen的 组件）似乎不适用于由parse and format操作的select选项。

当存储在表单状态中时，我希望将选项对象“扁平化”为它们的值（并将它们改回选项对象，以便使用React-Select呈现），因此我执行了以下操作：

const SelectAdapter = ({ input, ...rest }) => (
  <Select {...input} {...rest} searchable />
);

const options = [
  { value: "two-a", label: "Two A" },
  { value: "two-b", label: "Two B" }
];

<Field
  name={fieldName}
  component={SelectAdapter}
  options={options}
  parse={(formattedOption) => formattedOption ? formattedOption.value : undefined}
  format={(parsedValue) => options.find((option) => option.value === parsedValue)}
/>

并在pickoptions中更改一行，如下所示：

-const aValue = aField.input.value.value;
+const aValue = aField.input.value;

现在，pickoptions似乎可以正确地清除子级/从属select字段的值，就react-final-form状态/值而言，但它仍然在select字段中呈现旧值，我想不出原因。如有任何帮助，我们将不胜感激！提前道谢。

演示问题的CodeSandbox：在第一个下拉列表中选择一个选项，然后在第二个下拉列表中选择一个选项。接下来，将第一个下拉菜单更改为其他选项。它应该清除第二个下拉列表（您会注意到它清除了表单中的实际值，在输入下面打印的值中，但在第二个/child下拉列表中保留了以前选择的选项的旧标签文本）。您可能还注意到Reset按钮会在内部清空表单值，但不会清除输入。同样的根本原因，我猜。

（编辑）超级黑客变通？

const SelectAdapter = ({ input, ...rest }) => {
  const [hack, setHack] = React.useState(0);

  React.useEffect(() => {
    if (rest.options) setHack((hack) => hack + 1);
  }, [rest.options]);

  return <Select key={hack} {...input} {...rest} searchable />;
};

Answer 1

我不确定。如果您在呈现childoption时console.log()选项，它们确实会发生更改。所以react-select是否忽略了对选项属性的更改？据我所知RFF似乎不是什么问题。