等待 Promises all 函数

Question

我正在使用中的代码加载一堆 .csv 文件。一旦加载了这些，我就想渲染一个反应组件。我已经在下面的 datareader.js 中发布了我的方法。我试图弄清楚如何最好地从调用此方法的单独组件调用此方法并等待它完成后再继续。

export async function LoadParkingTicketsData() {
  let urls = [
    "./data/2016.csv",
    "data/2017.csv"
  ];

  Promise.all(
    //pass array of promises to Promise.all
    urls //you have an array of urls
      .map(
        //map urls to promises created with parse
        (url) =>
          new Promise(
            (
              resolve,
              reject //create one promise
            ) =>
              Papa.parse(url, {
                download: true,
                complete: resolve, //resolve the promise when complete
                error: reject, //reject the promise if there is an error
              })
          )
      )
  )
    .then(function (results) {
      **console.log(results[0]);** // log result from file 1
      console.log(results[1]); // log result from file 2
    })
    .catch(
      //log the error
      (err) => console.warn("Something went wrong:", err)
    );
}

我假设我必须在 useEffect() 中做一些事情，但无论我如何调用此方法，执行都会继续并最终调用 ** 行。谁能告诉我如何最好地做到这一点，以便数据加载发生，直到它等待。

export function TimeOfDayTickets() {

  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    
  }, []);

  if (isLoading) {
    return <div className="App">Loading...</div>;
  }
  return <Line options={options} data={chartData} />;
}

Answer 1

也许这就是你想要做的？让我知道是否有帮助

 export function TimeOfDayTickets() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);


  useEffect(() => {
    LoadParkingTicketsData().then((res) => {
      setData(res);
      
    }).finally(() => {
      setIsLoading(false);
    })
  }, []);

  if (isLoading) {
    return <div className="App">Loading...</div>;
  }
  return <Line options={options} data={data} />;
}

注意：即使函数无法获取数据，finally也会运行，因此，isLoading将设置为false，组件Line 将呈现，如果您将 data 状态传递给 Line，您应该在其中处理如果没有数据会发生什么，例如，呈现“无可用数据”之类的消息或东西。

等待 Promises all 函数

Waiting for function with Promises all

javascript

reactjs

es6-promise