为什么我得到三个未定义的东西，为什么一次调用有两个输出？答案

【问题标题】：Why I get three undefined things and why there are two outputs in one call?为什么我得到三个未定义的东西，为什么一次调用有两个输出？
【发布时间】：2021-06-11 14:07:11
【问题描述】：

我是新手。所以我正在开发一个从 api 获取数据的应用程序。所以我用这段代码从一个api中获取数据。

let [jsonData,setJsonData]=useState([]);

useEffect(() => {
    async function fetchData() {
        try {
            const response = await fetch(apiURL);
            const json = await response.json();
            setJsonData(json.components.map(function(item){
                return item;
            }))
        } catch (error) { }
    }
    fetchData();
    
}, [])
const [table1,table2,pieChart]=jsonData;
console.log(table1,table2,pieChart)

这是问题。当我运行它时，我会得到这样的输出。

在这为什么在第一次调用中有两个输出和在第一次输出中为什么我得到 3 个未定义的东西。我只需要在第一次调用中获取那些 JSON 数据。如何只获取所需的数据而不获取那些未定义的东西。

提前致谢。

【问题讨论】：

标签： javascript reactjs api asynchronous async-await

【解决方案1】：

您无法避免 fetch 函数是异步的，但您可以执行以下操作：

if (!jsonData.length) return <div>loading...</div>;

【讨论】：

有什么办法可以等待其他进程，直到我从 api 获取数据？
@TharinduGimras 您可以创建一个包装器更高级别的组件，该组件等待某事完成，并且仅在数据存在时才呈现子组件。或者你可以使用“悬念”。不过，这两者都相当复杂。我强烈建议您从简单版本开始。只是在数据存在之前不要渲染。它实际上是 1 个 if 语句。
非常感谢，我明白了。我会这样做的。

【解决方案2】：

您正在 useEffect 函数中执行异步请求，这意味着您的 fetch 函数将与当前代码并行运行，但它会在一段时间后完成。所以当你第一次 console.log 这些值时，useEffect 还没有完成。在 useEffect 结束时，您使用了 setJsonData，这将使组件以更新的状态重新渲染，因此这就是为什么您最后会看到第二个 console.log 具有正确值的原因。

【讨论】：

啊。这就是为什么我得到两个这样的输出。有什么方法可以等到我得到正确的值？
您可以在父组件中获取此数据，并且仅在这些值未定义时才呈现此组件。