Cuando no hay un campo. El valor para el contexto del producto existente funciona bien y actualiza correctamente el nombre del producto desde el menú desplegable anidado.

El contexto se ve así:

 const NamingContext = React.createContext({ name: '', setName: () => {} });

El componente principal se ve así:

 const [name, setName] = useState(''); const value = { name, setName }; return ( <Naming.Provider value={value}> <span>Product name</span> <Controller name="Name" control={props.control} render={(field) => { if (field.value) { setName(field.name); } return ( <Input value={value.name} onChange={(e) => field.onChange(e.target.value) } /> ); }} />

Entonces, para el editor en blanco, cuando elijo un nombre disponible en el menú desplegable secundario profundamente anidado, actualiza el contexto y muestra el valor en la entrada de nombre anterior. Sin embargo, si hay un valor de campo, siempre sobrescribe el valor recién seleccionado del contexto. ¿Cuál es la forma más inteligente de rastrear la última actualización en el componente anterior? Entonces, si hay un campo.valor y luego selecciona un nuevo elemento del menú desplegable, mostrará el nuevo valor del contexto y no será sobrescrito por campo.valor nuevamente.