He estado tratando de guardar el resultado de una llamada a la API con un estado de uso. pero estoy tratando de evitar una interfaz ya que la respuesta será muy grande y puede variar según el caso.
¿Cómo haría para guardar esta respuesta?
const DetailPage = ({navigation, route}) => { const [recipeData2, setRecipeData2] = useState(); const [loading, setLoading] = useState(true); const [key, setKey] = useState('APIKEY IS HERE'); const {id} = route.params; console.log(id) const getRecipeData2 = async() => { setLoading(true); const url = 'https://api.spoonacular.com/recipes/' + id + '/information?apiKey=' + key + '&includeNutrition=false'; axios.get(url).then(function (response) { setRecipeData2(response.data); console.log(response.data); console.log(recipeData2); }).catch(function (error) { console.log(error); if(error) { console.log('error') } }); setLoading(false); } useEffect(() => { getRecipeData2(); }, []) return ( <View> <Text></Text> </View> ) }Lo que parece es que necesita proporcionar un valor inicial a su useState y tampoco está configurando su cargador hasta que se complete su promesa para que pueda usar el bloque de promesa .finally() . Entonces, hacer estas cosas puede solucionar el problema por usted. Esto es lo que hay que hacer:
const DetailPage = ({ navigation, route }) => { const [recipeData2, setRecipeData2] = useState([]); const [loading, setLoading] = useState(true); const [key, setKey] = useState('APIKEY IS HERE'); const { id } = route.params; const getRecipeData2 = async () => { setLoading(true); const url = 'https://api.spoonacular.com/recipes/' + id + '/information?apiKey=' + key + '&includeNutrition=false'; axios.get(url).then(function (response) { setRecipeData2(response.data); }).catch(function (error) { if (error) console.log('error') }).finally(function () { setLoading(false); }) } useEffect(() => { getRecipeData2(); }, []) return ( <View> { recipeData2.map((data, index) => { return <Text key={ index.toString() }> { data.title } </Text> }) } </View> ) }