JavaScript字符串截取方法报错：undefined类型错误解决方案-js教程-PHP中文网

JavaScript字符串截取方法报错：undefined类型错误解决方案

花韻仙語

发布： 2025-09-05 18:04:02

原创

773人浏览过

javascript字符串截取方法报错：undefined类型错误解决方案

JavaScript字符串截取方法报错：undefined类型错误解决方案

在Next.js或类似框架中，从后端获取数据并渲染到前端页面是一个常见的操作。但如果数据加载存在延迟，直接对可能为undefined的值进行字符串操作，就会导致TypeError: Cannot read properties of undefined (reading 'substring')错误。

// 摘要：本文旨在解决JavaScript中因对undefined变量使用substring()或slice()方法导致的TypeError。通过分析错误原因，提供了使用条件渲染和可选链操作符两种解决方案，帮助开发者编写更健壮的代码。

登录后复制

错误原因分析

此错误表明你正在尝试对一个undefined的变量调用substring()方法。通常，这发生在以下情况：

异步数据加载： 从服务器获取的数据尚未加载完成，而组件已经开始渲染。此时，用于存储数据的状态变量可能尚未被赋值，其值为undefined。
初始状态： 组件的初始状态中，某些变量被设置为undefined，而在后续渲染中，这些变量被直接用于字符串操作。

解决方案

以下提供两种解决方案，可以有效地避免此错误：

1. 条件渲染

在渲染组件之前，先检查变量是否已经定义。如果变量为undefined，则不渲染依赖该变量的部分，或者显示一个加载中的提示。

立即学习“Java免费学习笔记（深入）”；

import { useState, useEffect } from 'react';

function Profile() {
  const [born, setBorn] = useState(undefined); // 初始化为undefined

  useEffect(() => {
    // 模拟异步数据加载
    setTimeout(() => {
      setBorn("2023-05-20T04:12:43.952Z");
    }, 1000);
  }, []);

  if (!born) {
    return <div>Loading...</div>;
  }

  const created = born.substring(0, 10);

  return (
    <div>
      <p>Created: {created}</p>
    </div>
  );
}

export default Profile;

登录后复制

代码解释：

挖错网

一款支持文本、图片、视频纠错和AIGC检测的内容审核校对平台。

查看详情

useState(undefined)：将born状态初始化为undefined，模拟数据加载前的状态。
useEffect：使用useEffect模拟异步数据加载，1秒后将born设置为实际的日期字符串。
if (!born)：在渲染Created字段之前，检查born是否为undefined。如果是，则显示"Loading..."，直到born被赋值。

注意事项：

这种方法可以避免错误，但用户在数据加载完成前会看到一个占位符。根据实际情况，可以提供更友好的加载提示。

2. 可选链操作符（Optional Chaining）

使用可选链操作符?.可以在访问对象的属性或调用方法之前，检查该对象是否为null或undefined。如果对象为null或undefined，则表达式会立即返回undefined，而不会抛出错误。

import { useState, useEffect } from 'react';

function Profile() {
  const [born, setBorn] = useState(undefined); // 初始化为undefined

  useEffect(() => {
    // 模拟异步数据加载
    setTimeout(() => {
      setBorn("2023-05-20T04:12:43.952Z");
    }, 1000);
  }, []);

  const created = born?.substring(0, 10);

  return (
    <div>
      <p>Created: {created || 'Loading...'}</p>
    </div>
  );
}

export default Profile;

登录后复制

代码解释：

born?.substring(0, 10)：使用可选链操作符?.，只有当born不是null或undefined时，才会调用substring()方法。如果born是undefined，则created的值为undefined。
{created || 'Loading...'}：使用短路运算符||，当created为undefined时，显示"Loading..."。

注意事项：