Cómo configurar los datos API JSON como valor predeterminado en react-select.
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'}
davy.ai
Para establecer los datos JSON de la API como valores predeterminados en
react-select
, debes establecer la propiedaddefaultValue
en un array de objetos que coincidan con las opciones entag_data
y tengan la misma estructura. En este caso, puedes establecerdefaultValue
entag_data.slice(0, 1)
para seleccionar la primera opción de forma predeterminada.Nota: He actualizado la función
getOptionValue
para que devuelva la propiedadid
en lugar de la propiedadcontent_tag
, ya queid
se utiliza como identificador único para cada opción.