React Native：如何在渲染屏幕之前立即获取数据？答案

【问题标题】：React Native: How can i fetch Data instant before rendering Screen?React Native：如何在渲染屏幕之前立即获取数据？
【发布时间】：2020-09-03 13:22:26
【问题描述】：

我用这个方法试了一下

useEffect(() => {
    async function getUserData() {
      var userData = await firebase.firestore().doc("ingredients/" + user.uid).get();
      var labels = []
      userData.data().ingredients.forEach(ingredient => {
        labels.push(ingredient.label)
      })
      setUserIngredients(labels)
      setUserRecipes(userData.data().recipes)
    }
    getUserData()
    fetchRecipes(userIngredients)
  }, [])

但是当我使用应用程序时它不会加载我需要在它获取数据之前将文件保存在我的计算机上。我正在使用 expo 在我的智能手机上调试应用程序。我希望它在我进入屏幕或我的应用程序启动时获取数据

【问题讨论】：

你可以添加加载器，因为你不知道获取数据需要多少时间，当获取数据时移除加载器。

标签： javascript reactjs react-native

【解决方案1】：

您可以在获取数据时使用加载器，并在获取数据时隐藏它！ also 如果你想在渲染屏幕之前即时获取数据，那么如果你真的想要它，那么在自定义构造函数中获取数据不是一个好方法！

即

  const [constructorHasRun, setConstructorHasRun] = useState(false);

并在此构造函数中调用 fetch API

 const constructor = () => {
    if (constructorHasRun) return;
    // fetch API   
    setConstructorHasRun(true);
  };

希望你想要它并提供帮助！

【讨论】：

在渲染之前我在哪里调用构造方法来使用它？
const 构造函数 = () => { if (constructorHasRun) return;否则 { getUserData();获取食谱（）； setConstructorHasRun(true); } };
这是我现在的代码，但它没有从数据库中获取成分，也没有在渲染之前获取数据。对不起，我是新来的反应
只需将此构造函数放入您的功能组件中，然后立即通过constructor()调用它
getUserData() 函数不会将来自 firebase 即时的成分放入 userIngredients。我该如何解决？

【解决方案2】：

对于这些情况，我建议将数据保存在 Redux 状态有助于您的应用看起来更快，并且您可以在需要时访问它。此外，如果您不使用 Redux，您可以将数据保存在 SQLite 中，因为您的数据似乎与食谱有关，并在启动画面中更新您的数据。这只是另一种解决方案...

【讨论】：