我无法访问 DateList 函数中 sessionDates 数组中存储的数据

Question

我无法访问 DateList 函数中 sessionDates 数组中存储的数据，

这是我的 index.js 中的代码，包括 api 调用

import React from "react";
import ReactDOM from "react-dom";
const availableDates = [];
const available = [];
const sessionDates = [];

function getDates(e){
  getDate(apiUrl);
}

const getDate = async (apiUrl)=>{
  const res = await fetch(apiUrl)
  try {
    const data = await res.json();
    availableDates.push(data);
    availableDates.map((datee) => {
      datee.map((session) => {
        sessionDates.push(session.date.slice(0, 10));
      });
    });
    return sessionDates;
  }  catch(error) {
    console.log("error", error);
  }
}
window.addEventListener('load', getDates);

function DateList(){
  return <section>{sessionDates[0]}</section>;
}

Answer 1

当您根据 API 调用设置 sessionDates 时，您的代码中没有任何内容会在 sessionDates 更改时提示 DateList 重新呈现。因此，它只会显示 sessionDates 的初始值，其中 sessionDates[0] 未定义。

相反，我建议您使用 useEffect 挂钩触发您的 api 调用并使用 useState。