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.

Cómo configurar los datos API JSON como valor predeterminado en react-select.

25 Jul, 2023 Programación

Quiero establecer datos JSON de API como valores predeterminados en react-select.


const [tag, setTag] = useState([]);
const [tag_data, setTagData] = useState([[]]);

Función useEffect para llamar a la API y obtener los datos JSON


useEffect(() => {
(async () => {
const tag_result = await axios(${process.env.REACT_APP_API_URL}/tag);
setTagData(tag_result.data);
})();
}, []);

A continuación se muestra mi respuesta de datos JSON de API


{id: 1, content_tag: 'Test'}
{id: 2, content_tag: 'test 1'}
{id: 3, content_tag: 'test 2'}
{id: 4, content_tag: 'test 3'}


Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para establecer los datos JSON de la API como valores predeterminados en react-select, debes establecer la propiedad defaultValue en un array de objetos que coincidan con las opciones en tag_data y tengan la misma estructura. En este caso, puedes establecer defaultValue en tag_data.slice(0, 1) para seleccionar la primera opción de forma predeterminada.

    <select id="react-select-tag" ismulti="" options="{tag_data}" hideselectedoptions="{false}" getoptionlabel="{(option)" ==""> option.content_tag}
  getOptionValue={(option) => option.id}
  onChange={(e) => setTag(e)}
  defaultValue={tag_data.slice(0, 1)}
/>

    Nota: He actualizado la función getOptionValue para que devuelva la propiedad id en lugar de la propiedad content_tag, ya que id se utiliza como identificador único para cada opción.

Comments are closed.