Javascript React state.map返回空数组

我使用COVID19API创建了一个应用程序。我将状态和函数存储在上下文api中。我想创建一个apexchart，但是将其保持在同一位置的dailydata映射返回一个空数组。我需要用dailyDate输入我的选项数据

const {country} = useContext(countryContext);
const [dailyData,setDailyData] = useState([]);

useEffect(() => {
  const fetchdata = async () => {
      const data = await dayOneAllStatus(country);
      setDailyData(data);            
  };  
  fetchdata();
  },[country])

const [options,setOptions] = useState({
    chart: {
        height: 350,
        type: 'area'
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        curve: 'smooth'
      },
      xaxis: {
        type: 'datetime',
        categories: dailyData.map(item => item.Date)
      },
      tooltip: {
        x: {
          format: 'dd/MM/yy'
        },
      },
});
const [series,setSeries] = useState([
    {
        name: 'Vaka',
        data: dailyData.map(item => item.Confirmed)
      }, {
        name: 'İyileşen',
        data: dailyData.map(item => item.Recovered)
      },
      {
        name: 'Ölüm',
        data: dailyData.map(item => item.Deaths)
      }
]);

return (
      
  <div id="chart">
  <Chart options={options} series={series} type="area" height={350} />
</div>
    
)

---

调用useState时，传入的参数是初始值。因此，当函数因为

dailyData

已更新而重新运行时，options和series中的值不会更新

如果您实际上没有在任何地方使用

setSeries

和

setOptions

，最好将它们作为使用

dailyData

计算的普通变量：

const {country} = useContext(countryContext);
const [dailyData,setDailyData] = useState([]);

useEffect(() => {
  const fetchdata = async () => {
      const data = await dayOneAllStatus(country);
      setDailyData(data);            
  };  
  fetchdata();
  },[country])

const options = {
    chart: {
        height: 350,
        type: 'area'
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        curve: 'smooth'
      },
      xaxis: {
        type: 'datetime',
        categories: dailyData.map(item => item.Date)
      },
      tooltip: {
        x: {
          format: 'dd/MM/yy'
        },
      },
};
const series = [
    {
        name: 'Vaka',
        data: dailyData.map(item => item.Confirmed)
      }, {
        name: 'İyileşen',
        data: dailyData.map(item => item.Recovered)
      },
      {
        name: 'Ölüm',
        data: dailyData.map(item => item.Deaths)
      }
];

return (
      
  <div id="chart">
  <Chart options={options} series={series} type="area" height={350} />
</div>
    
)

const{country}=useContext（countryContext）；
const[dailyData，setDailyData]=useState（[]）；
useffect（（）=>{
const fetchdata=async（）=>{
const data=等待dayOneAllStatus（国家/地区）；
setDailyData（数据）；
};  
fetchdata（）；
}，[国家]）
常量选项={
图表：{
身高：350，
类型：“区域”
},
数据标签：{
已启用：false
},
笔划：{
曲线：“平滑”
},
xaxis：{
键入：“日期时间”，
类别：dailyData.map（item=>item.Date）
},
工具提示：{
x:{
格式：年月日
},
},
};
常数系列=[
{
名称：“瓦卡”，
数据：dailyData.map（item=>item.Confirmed）
}, {
名称：“İyileşen”，
数据：dailyData.map（item=>item.Recovered）
},
{
名称：“Ölüm”，
数据：dailyData.map（item=>item.death）
}
];
返回(
)

传递给

useState

的参数是初始状态，即第一次渲染时的状态。在本例中，您是从API获取每日数据，因此不会在第一次渲染时设置。您可以使用这样一种效果：当日常数据发生变化时，它会调用

setSeries

，使用那些

dailyData.map

values感谢您的回复，我理解了我所犯的错误并更正了它，我非常感谢。

const {country} = useContext(countryContext);
const [dailyData,setDailyData] = useState([]);

useEffect(() => {
  const fetchdata = async () => {
      const data = await dayOneAllStatus(country);
      setDailyData(data);            
  };  
  fetchdata();
  },[country])

const options = {
    chart: {
        height: 350,
        type: 'area'
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        curve: 'smooth'
      },
      xaxis: {
        type: 'datetime',
        categories: dailyData.map(item => item.Date)
      },
      tooltip: {
        x: {
          format: 'dd/MM/yy'
        },
      },
};
const series = [
    {
        name: 'Vaka',
        data: dailyData.map(item => item.Confirmed)
      }, {
        name: 'İyileşen',
        data: dailyData.map(item => item.Recovered)
      },
      {
        name: 'Ölüm',
        data: dailyData.map(item => item.Deaths)
      }
];

return (
      
  <div id="chart">
  <Chart options={options} series={series} type="area" height={350} />
</div>
    
)