使用状态问题，获取数据时保存数据时使用效果

Question

我是本机反应的新手，我想在我的应用程序的欢迎屏幕上使用 axios 单击对 api 的请求，并使用 useState 将数据保存在变量中，然后在另一个类(AllProductCategory .js(中使用这些数据，而无需将请求返回到 api。

我正在使用 React 原生 0.62 钩子反应导航 5 和 axios。

我在导航.js文件中有以下内容。一个上下文，它以 useMemo 作为其值，它包含一个返回值，以便它返回一个数组，其中包含它使用 axios 从应用程序带来的信息。该类如下所示： 在本课程中，跳过与我当前遇到的问题无关的某些代码行。

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>
);
}

有了这个文件，我想要的是加载初始屏幕时加载所有产品的数据，因此当我想在另一个屏幕上使用此数据时，只需调用上下文变量并返回数据，而无需向 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>
);
}

我的应用程序.js如下：

import React from 'react';
import Navigation from "./src/components/Navigation/Navigation"
export default function App() {
return <Navigation />
}

我目前遇到的问题是，当我启动我的应用程序时，我显示请求是使用 axios 发出的，并且它正确地带来了数据，但是 useState 没有填充 axios 响应我的数据(它打印 [](。但是，如果我将更改保存在可视代码中的导航.js类中，则导航类的变量 allproduct 将正确填充数据，因此在我要显示数据的另一个类中，它会正确绘制数据。

我需要在我的应用程序加载时保存 api 带来的数据，并且在另一个类中使用它时，这些数据会保留，以便可以使用它们并在屏幕上说明这些数据。

Answer 1

当创建传递给useMemo的函数时，它会捕获allproducts的第一个值，并将始终具有该值。它将始终返回[].

为了使useMemo再次运行并捕获新值，请将该值添加到第二个参数(数组(中。每当该数组中的值发生变化时，React 都会调用 memo 函数，然后再次创建getAllProducts并捕获新的值allproducts。

const authContext = useMemo(
() => ({
getAllProducts: () => {
return allproducts;
},
}),
[allproducts]
);