Я новичок, чтобы реагировать на родной язык, и я хочу, чтобы на экране приветствия моего приложения щелкнул запрос к api с использованием ax ios, и данные сохраняются в переменной с помощью useState, а затем используют эти данные в другом классе (AllProductCategory. js) без необходимости делать запрос обратно в api.
Я использую React native 0.62 hooks, реагируйте навигацию 5 и ax ios.
У меня есть следующее в файле Navigation. js. Контекст, в качестве значения которого используется useMemo, который содержит return, так что он возвращает массив с информацией, которую он приносит из приложения, используя ax ios. класс выглядит так: в этом классе пропустите определенные строки кода, которые не имеют ничего общего с проблемой, с которой я сейчас сталкиваюсь.
export default function Navigation() {
const [allproducts, setAllproducts] = useState([]);
useEffect(() => {
const _loadAllCategories = async () => {
await axiosClient
.get("/service/product_available")
.then(function (response) {
console.log("Data antes de pasarlo al useState ", response.data);
setAllproducts(response.data);
console.log("Los productos son: ", allproducts);
})
.catch(function (error) {
console.log("Error obteniendo el token", error);
});
};
_loadAllCategories();
}, []);
const authContext = useMemo(
() => ({
getAllProducts: () => {
return allproducts;
},
}),
[]
);
return (
<AuthContext.Provider value={authContext}>
{state.isLoading ? (
<SplashStackScreen />
) : state.userToken == null ? (
<PrincipalStackScreen />
) : (
<MyDrawer />
)}
</AuthContext.Provider>
);
}
В этом файле я хочу получить данные, которые содержат все продукты, которые должны быть загружены при загрузке экрана spla sh, поэтому, когда я хочу использовать эти данные на другом экране, просто вызовите контекстную переменную и верните данные без необходимости делать еще один запрос к api.
Затем в классе я реализую вызов этих данных с использованием контекста
const { getAllProducts } = React.useContext(AuthContext);
const allProducts = getAllProducts();
Полный класс выглядит следующим образом:
import React, { useState, useEffect } from "react";
import { View, Text, FlatList, StyleSheet, TouchableOpacity, Dimensions, Image } from "react-native";
import { AuthContext } from "../../context";
var { height, width } = Dimensions.get("window");
export default function AllProductCategoryScreen() {
const { getAllProducts } = React.useContext(AuthContext);
const allProducts = getAllProducts();
function Product_Category({ name, image }) {
console.log("name e image", name);
return (
<View>
<TouchableOpacity>
<Image style={styles.imageCategory} source={{ uri: image }} />
<Text>{name}</Text>
</TouchableOpacity>
</View>
);
}
return (
<View>
<Text>Todas las categorias</Text>
<View style={{ alignItems: "center" }}>
<FlatList
scrollEnabled={true}
numColumns={2}
data={allProducts}
renderItem={({ item }) => (
<Product_Category name={item.name} image={item.imagePath} />
)}
keyExtractor={(item, index) => index.toString()}
/>
</View>
</View>
);
}
My app. js выглядит следующим образом:
import React from 'react';
import Navigation from "./src/components/Navigation/Navigation"
export default function App() {
return <Navigation />
}
Проблема, с которой я столкнулся в настоящее время, заключается в том, что когда я запускаю свое приложение, я показываю, что запрос сделан с помощью ax ios и он возвращает данные правильно, однако useState не заполняется данные, которые топор ios отвечает мне (выводит []). Однако, если я сохраню изменения, внесенные в класс navigation. js в визуальном коде, переменная allproducts класса навигации будет правильно заполнена данными и, следовательно, в другом классе, где я хочу отобразить данные, он отобразит данные правильно.
Мне нужно, чтобы при загрузке приложения данные, которые приносит api, сохранялись и чтобы при использовании в другом классе эти данные оставались, чтобы их можно было использовать и отображать эти данные на экране.