在 React Native 中从 API 获取数据答案

【问题标题】：Fetch data from API in React Native在 React Native 中从 API 获取数据
【发布时间】：2021-12-23 07:37:05
【问题描述】：

我想知道如何从 API 获取数据，创建所有反应元素，并且只有在所有这些都完成后才在应用程序上进行渲染。实际上我使用钩子来做这件事，但问题是在第一次启动应用程序时渲染没有 API 数据，之前因为我在代码中使用钩子来存储和使用 API 数据，所以应用程序会快速重新渲染所有数据。（我知道会发生这种情况，因为当我使用函数更改 hooks 值时，代码会继续并在没有先前输入的情况下重新启动）

我希望我说清楚了，我的英语不太好

【问题讨论】：

能不能分享下你的代码，不然很难帮到你

标签： react-native api fetch

【解决方案1】：

这应该会成功：

import React, {Button} from 'react';

const RequestTest = () => {
    const request = fetch('https://examples.com/data.json', {
        method: 'POST',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            firstParam: 'yourValue'
        })
    });

    return (
        <Button onClick={request}>
            Make simple request
        </Button>
    );
}

【讨论】：

不，我需要循环存储和使用请求的结果
你能把它更好地放在你的代码中吗？这样我就可以写一个更好的例子来适应你的情况
什么意思？？

【解决方案2】：

钩子 useEffect 仅在组件被渲染后才被调用，因此这就是为什么数据在开始时为空的原因。

【讨论】：

正确的方法是什么？
这是反应的正常行为，您可以通过 useEffect 正确使用它。如果需要，您可以在加载数据时使用 ActivityIndicator
好的，但是我怎么知道第一次启动的数据或新数据（当用户滑动或更改 watchDay 时插入到钩子中）成功加载？我希望代码首先获取所有数据，将其存储在挂钩中，然后渲染所有项目