Menu a discesa condizionali con React-Final-Form e React-Select utilizzando l'analisi e il formato

Question

Questa è una domanda di follow-up a diverse domande simili , ma la soluzione trovata ( componente di Erik Rasmussen ) non sembra funzionare per selezionare le opzioni manipolate dall'analisi e dal formato .<PickOptions />

Voglio "appiattire" gli oggetti delle opzioni solo nel loro valore durante la memorizzazione nello stato del modulo (e cambiarli di nuovo in oggetti delle opzioni per il rendering con react-select), quindi ho fatto quanto segue:

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)}
/>

E ho cambiato una riga in questo PickOptionsmodo:

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

Ora PickOptionssembra cancellare correttamente il valore del campo di selezione figlio / dipendente per quanto riguarda lo stato / i valori della forma finale di reazione, ma rende ancora il vecchio valore nel campo di selezione e non riesco a capire perché. Qualsiasi aiuto sarebbe molto apprezzato! Grazie in anticipo.

CodeSandbox che mostra il problema : scegli un'opzione nel primo menu a discesa, quindi scegli un'opzione nel secondo menu a discesa. Quindi, cambia il primo menu a discesa con l'altra opzione. Dovrebbe cancellare il secondo menu a discesa (noterai che cancella il valore effettivo nel modulo, nei valori stampati sotto gli input, ma lascia il vecchio testo dell'etichetta dell'opzione selezionata in precedenza nel secondo menu a discesa / figlio). Potresti anche notare che il pulsante Reimposta svuota internamente i valori del modulo ma non cancella gli input. Stessa causa principale, presumo.

(modifica) Super Hacky Workaround?

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

Non ne sono sicuro. Se console.log()il optionsdurante il rendering childOption, che fanno il cambiamento. Quindi forse react-selectsta ignorando le modifiche optionsall'elica? Non sembra essere un problema con RFF, da quello che posso dire.