es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Autocompletado muestra una advertencia en rojo cuando se establece un valor en el useState que modifica.

Autocompletado muestra una advertencia en rojo cuando se establece un valor en el useState que modifica.

02 Aug, 2023 Programación 
const [country, set_country] = useState();

<autocomplete autohighlight="{true}" necesario="" autoselect="{true}" id="geo-select-country" options="{all_country}" value="{country}" causa="" el="" aviso="" rojo="" onchange="{(event," selected_country)=""> {
    set_country(selected_country);
  }}
  classes={autocomplete_classes}
  renderInput={(params) => (
    <textfield {...params}="" label="País" margin="none" focused=""></textfield>
  )}
/>

Mensaje de aviso:

index.js:1 MUI: Un componente está cambiando el estado de valor no controlado de Autocomplete para que sea controlado.
Los elementos no deben cambiar de no controlado a controlado (o viceversa).
Decide entre usar un elemento Autocomplete controlado o no controlado durante toda la vida del componente.
La naturaleza del estado se determina durante el primer renderizado. Se considera controlado si el valor no es `undefined`.

El Autocomplete modifica el useState, pero el valor del useState modifica el Autocomplete.

¿Esto no es correcto?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    No, esto no es correcto. El mensaje de advertencia indica que el elemento AutoComplete está cambiando de un estado no controlado a un estado controlado, y esto no es recomendado. En el código proporcionado, la propiedad value del elemento AutoComplete está configurada con el valor del estado country, lo que lo convierte en un componente controlado. Sin embargo, el estado country se encuentra inicialmente sin definir, lo que hace que el elemento AutoComplete sea no controlado.

    Para solucionar este problema, puedes inicializar el estado country con un valor predeterminado o eliminar la propiedad value del elemento AutoComplete. Si deseas tener un valor predeterminado para el AutoComplete, puedes configurarlo con el valor predeterminado del estado country.

    Ejemplo:

          const [country, set_country] = useState(all_country[0]); // inicializar con valor predeterminado

      <autocomplete autohighlight="{true}" autoselect="{true}" id="geo-select-country" options="{all_country}" value="{country}" onchange="{(event," selected_country)=""> {
          set_country(selected_country);
        }}
        classes={autocomplete_classes}
        renderInput={(params) => (
          <textfield {...params}="" label="{"Country"}" margin="none" focused=""></textfield>
        )}
      />

    O:

          const [country, set_country] = useState(); 

      <autocomplete autohighlight="{true}" autoselect="{true}" id="geo-select-country" options="{all_country}" onchange="{(event," selected_country)=""> {
          set_country(selected_country);
        }}
        classes={autocomplete_classes}
        renderInput={(params) => (
          <textfield {...params}="" label="{"Country"}" margin="none" focused=""></textfield>
        )}
      />

    Ten en cuenta que en el segundo ejemplo, es posible que debas verificar los valores undefined o null de country en otras partes de tu código.

Comments are closed.