当试图用JavaScript获取CSV数据时，无尽的承诺循环

Question

我知道有很多关于如何使用fetch和从异步函数返回承诺的帖子。我已经读到，你应该移动的代码依赖于获取的数据/内容到函数的位，但我看不出这是如何可能与我的设置。因此，在你把我的问题作为重复结束之前，我要求你把它完整地读一遍，并试着记住当你刚开始编程并需要一些帮助时是什么样子的。

我正在构建一个React应用程序，我想要根据用户输入来绘制一堆CSV数据。我试图获取CSV数据，拉出我想要的两个变量，然后将其传递到一个VictoryChart。这段代码成功地获取数据，将其转换为由记录分隔的数组，然后创建一个新的对象数组(数据输入VictoryChart需要)，其中只有两个字段是我想要的变量:

async function getData(filePath) {
let dataArray = []
await fetch(filePath)
.then(response => {
return response.text()
})
.then(data => CSVToArray(data))
.then(data => {
for (let i in data) {
dataArray.push(
{ DateTime: data[i][0], OATemp: data[i][1]}
)
};
return dataArray
})
.catch(error => alert(error))
}

根据几个来源的建议，我将尝试将VictoryChart放入return dataArray之后的函数中，以保留函数中依赖于该函数的所有内容，但我不知道如何通过尝试调用然后生成图形的函数来控制页面的布局。我不明白如何使用它构建DOM(我使用它对吗?)我是React的新手(通常是一个没有经验的程序员)，所以这可能是问题的一部分。

对我来说唯一有意义的是async函数返回数据，这样我就可以将它传递到VictoryChart中。但是，似乎不可能从它被包装到的承诺中提取函数返回的任何内容。我被告知要使用.then，但这只是最终返回一个承诺。这看起来太乱伦了……具体来说，我最近的尝试是这样的(只是使用alert "see"发生了什么):

alert(getData('./2021WeatherData.csv').then(data => {return data}))

希望，我只是不明白如何正确使用.then建议其他人。我花了很多很多时间尝试了几十个不同的版本，并在谷歌上搜索了我能想到的每一个同义词。我知道我遗漏了一些东西，所以谢谢你的帮助。

***提供额外的代码以下是我所理解的是我的React应用程序的DOM(请纠正我在措辞等方面的错误)。这将把我的应用程序呈现给浏览器。

return (
<div className="App">
<header className="App-header">
<div className='Header-button-container'>
<button onClick={() => alert('Weather')}>
Weather
</button>
<button onClick={() => alert('1st Floor')}>
1st Floor
</button>
<button onClick={() => alert('2nd Floor')}>
2nd Floor
</button>
</div>
</header>
<VictoryChart>
<VictoryLine data={getData('./2021WeatherData.csv').then(data => { return data })} x='DateTime' y='OATemp' />
</VictoryChart>
</div>
);

对我来说，这决定了内容在页面上的显示方式。我注意到这里的一切都是一个标签，所以我不明白如何在VictoryLine标签存在的地方插入一个函数。"data"属性的VictoryLine图需要数据作为对象数组，这就是我试图从我的getData函数输出(但它一直被包裹在一个该死的承诺!!)。我能够使它工作得很好与我在应用程序内声明的虚拟数据集，但我试图获取数据时卡住。由于我无法获取数据(似乎所有可能的是在函数内部做的事情)，我只是卡住和困惑。这里的意图是能够点击一个按钮，并获取相关的数据图表。

Answer 1

听起来您只是在将CSV结果传递给绘图函数时遇到了麻烦。首先，你需要从getData返回你的值;当前它没有返回任何东西:

async function getData(filePath) {
let dataArray = []
return fetch(filePath)
...
}

那么你可以用两种方式传递你的结果:

function theGraphFunction(data) {
// this graphs your data
}
getData("./path/to/data.csv").then(data => theGraphFunction(data));

或

(async () => {
const data = await getData("./path/to/data.csv");
theGraphFunction(data);
})()

现在你已经更新了你的问题，包括你实际想要做的事情的信息，你可以这样做:

import {useEffect, useState} from "react";
function App() {
const [graphData, setGraphData] = useState(null);
useEffect(() => {
getData("./path/to/data.csv").then(data => setGraphData(data));
}, [])
// only include this if you don't want to render the component
// until data is loaded
if(!graphData) {
return null;
}
return (
<div className="App">
<header className="App-header">
<div className='Header-button-container'>
<button onClick={() => alert('Weather')}>
Weather
</button>
<button onClick={() => alert('1st Floor')}>
1st Floor
</button>
<button onClick={() => alert('2nd Floor')}>
2nd Floor
</button>
</div>
</header>
<VictoryChart>
<VictoryLine data={graphData} x='DateTime' y='OATemp' />
</VictoryChart>
</div>
);
}