我可以访问 API 数据，直到我刷新页面，然后它变得不可访问答案

【问题标题】：I can access API data until I refresh the page, then it becomes inaccessible我可以访问 API 数据，直到我刷新页面，然后它变得不可访问
【发布时间】：2022-12-05 05:10:31
【问题描述】：

尝试使用此代码访问我的 api 数据时：

  const lastActivity = data[data.length - 1];
  console.log(lastActivity);
  const lastActivityTime = lastActivity.time;
  console.log(lastActivityTime);

它最初有效，然后当我刷新页面时出现此错误：

未捕获的类型错误：无法读取未定义的属性（读取 xxx）

我也尝试将该代码放入 useEffect 块的不同区域，但没有成功。

这是组件的代码
import { React, useState, useEffect } from 'react';
import { Typography } from '@mui/material';
import { fToNow } from '../../../utils/formatTime';

export default function TimeSince() {
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch(`http://localhost:3000/record`)
      .then((response) => response.json())
      .then((usefulData) => {
        console.log(usefulData);
        setData(usefulData);
      })
      .catch((e) => {
        console.error(`An error occurred: ${e}`);
      });
  }, []);
  console.log(data);
  const lastActivity = data[data.length - 1];
  console.log(lastActivity);
  const lastActivityTime = lastActivity.time;
  console.log(lastActivityTime);
  return (
    <Typography variant="h4" sx={{ color: 'text.secondary' }}>
      test
    </Typography>
  );
}
接口代码：

[{"_id":"6383a78ef07f0c12aac4521f","日期":"2022-11-28","时间":"03:08","活动":"步行"},

我假设这是页面呈现时无法访问值的问题？但是在它获得值后我把它扔进了一个 then 块，但仍然不起作用。

【问题讨论】：

标签： javascript reactjs api backend

【解决方案1】：

看起来当数据未定义时会抛出错误。如果尚未从 API 加载数据，就会发生这种情况。在这种情况下，您可以通过在访问其长度属性和数组中的最后一个元素之前检查数据是否已定义来避免错误。

以下是如何修改代码以避免错误的示例：

import { React, useState, useEffect } from 'react';
import { Typography } from '@mui/material';
import { fToNow } from '../../../utils/formatTime';

export default function TimeSince() {
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch(`http://localhost:3000/record`)
      .then((response) => response.json())
      .then((usefulData) => {
        console.log(usefulData);
        setData(usefulData);
      })
      .catch((e) => {
        console.error(`An error occurred: ${e}`);
      });
  }, []);
  console.log(data);

  // Check if data is defined before accessing its properties
  if (data && data.length) {
    const lastActivity = data[data.length - 1];
    console.log(lastActivity);
    const lastActivityTime = lastActivity.time;
    console.log(lastActivityTime);
  }

  return (
    <Typography variant="h4" sx={{ color: 'text.secondary' }}>
      test
    </Typography>
  );
}

此代码将在尝试访问其属性之前检查数据是否已定义并至少具有一个元素。如果数据未定义或者是一个空数组，代码将不会抛出错误并且不会访问数据的属性。

【讨论】：