在第一次渲染时未定义上下文中的 React Native 数据

大佬教程收集整理的这篇文章主要介绍了在第一次渲染时未定义上下文中的 React Native 数据，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决在第一次渲染时未定义上下文中的 React Native 数据？

开发过程中遇到在第一次渲染时未定义上下文中的 React Native 数据的问题如何解决？下面主要结合日常开发的经验，给出你关于在第一次渲染时未定义上下文中的 React Native 数据的解决方法建议，希望对你解决在第一次渲染时未定义上下文中的 React Native 数据有所启发或帮助；

我使用 AppContext，当我从服务器获取数据时，我希望它保存在上下文中，但在第一次渲染时它不会保存。如果我做一些事情来重新渲染状态数据会出现在上下文中。

这是我的代码：

useEffect(() => {
  fetch('https://beautiful-places.ru/API/places')
    .then((responsE) => response.Json())
    .then((Json) => myContext.updatePlaces(Json))
    .then(() => console.log('JsonData',myContext.getPlaces()))
    .catch((error) => console.error(error));
},[]);

我的 getPlaces 和 updatePlaces 方法：

const [allPlaces,setAllPlaces] = useState();

const getPlaces = () => {
  return allPlaces;
};

const updatePlaces = (Json) => {
  setAllPlaces(Json);
};

const placesSetTings = {
  getPlaces,updatePlaces,};

以下是我如何使用 AppContext：

<AppContext.ProvIDer value={placesSetTings}>
  <themeProvIDer>
    <LoadAssets {...{ assets }}>
      <SafeAreaProvIDer>
        <AppStack.Navigator headerMode="none">
          <AppStack.Screen
            name="Authentication"
            component={AuthenticationNavigator}
          />
          <AppStack.Screen name="Home" component={HomeNavigator} />
        </AppStack.Navigator>
      </SafeAreaProvIDer>
    </LoadAssets>
  </themeProvIDer>
</AppContext.ProvIDer>;

你能解释一下为什么我的 console.log('JsonData',...) 返回 undefined 吗？

我不明白，因为我在上一个 .then 保存了它。

解决方法

@H_607_42@

编辑以注意以下代码未准备好复制粘贴。这是一个如何解决问题的示例 - 您需要在您的项目中正确实施它。

“问题”在于钩子是异步的——在这种特定情况下，您的 useEffect 也进一步使用了异步 fetch。

这意味着 fetch 返回的数据仅在组件呈现后才可用，并且由于您没有使用钩子更新状态/上下文，因此上下文不会更新。

执行此操作的方法需要进行一些更改。

1. 在您的 context 实现中，您应该有一个设置状态变量的 setter 方法，而您的 getter 应该是该状态变量。

placesContext.js

import React,{ createContext,useState } from "react";

export const placesContext = createContext({
  setPlaces: () => {},places: [],});

const { Provider } = placesContext;

export const PlacesProvider = ({ children }) => {
  const [currentPlaces,setCurrentPlaces] = useState(unit);

  const setPlaces = (places) => {
    setCurrentPlaces(places);
  };

  return (
    <Provider value={{ places: currentPlaces,setPlaces }}>{Children}</Provider>
  );
};

2. 使用创建的提供程序包装您的应用

App.js

import { PlacesProvider } from "../path/to/placesContext.js";

const App = () => {
  // ...
  return (
    <PlacesProvider>
      // Other providers,and your app Navigator
    </PlacesProvider>
  );
}

3. 然后，您应该直接从上下文中使用这些变量。

@H_733_3@myComponent.js

import { placesContext } from "../path/to/placesContext.js";

export const MyComponent = () => {
  const { currentPlaces,setPlaces } = useContext(placesContext);
  const [hasLoaded,setHasLoaded] = useState(false);

  useEffect(() => {
    async function fetchPlacesData() {
      const placesData = await fetch('https://beautiful-places.ru/api/places');

      if (placesData) {
        setPlaces(placesData);
      } else {
        // error
      }

      setHasLoaded(true);
    }

    !hasLoaded && fetchPlacesData();
  },[hasLoaded]);

  return (
    <div>{JSON.Stringify(currentPlaces)}</div>
  )
};