在React Hooks页面中实现「显示更多/显示更少」功能时出现「Cannot read properties of undefined (reading substring)」错误求助

咱们直接从报错根源入手，帮你快速解决这个问题：

错误原因分析 #

你遇到的这个TypeError，核心问题出在变量的导入与解构不匹配：

• 在textData1.js里，你导出的是一个纯字符串常量TextData，但在middleSection.js中，你却用了解构赋值const { text } = TextData;——字符串类型根本没有text这个属性，所以解构后text变量会变成undefined，调用text.substring()自然就会抛出"Cannot read properties of undefined"的错误。
• 另外你导入时用的变量名是data1，但解构时却写了TextData，这也是一个小失误。

解决方案 #

这里提供两种修复方式，你可以根据需求选择：

方式1：直接使用导出的字符串（适合当前简单场景）

修改middleSection.js中的变量获取逻辑，去掉不必要的解构，直接使用导入的字符串：

import React, { useState } from 'react';
import data1 from "../data/textData1";
const MiddleSection = () => {
  const [showMore, setShowMore] = useState(false);
  // 直接将导入的字符串赋值给text变量
  const text = data1;
  
  return (
    <div className='row'>
      <div className="middleTextContent">
        <p id="middleTextOverlay">
          {/* 给截断文本加上省略号，体验更友好 */}
          {showMore ? text : `${text.substring(0, 50)}...`}
        </p>
        {/* 把按钮移出p标签，语义更合理 */}
        <button className='showMoreLess' onClick={() => setShowMore(!showMore)}>
          {showMore ? "Show less" : "Show More"}
        </button>
      </div>
    </div>
  )
}
export default MiddleSection;

方式2：改为导出对象（适合未来扩展多字段场景）

如果以后需要给文本数据添加更多属性（比如标题、标签），可以修改textData1.js导出一个对象：

// textData1.js 修改后
import React from 'react';
const TextData = {
  text: "We are an awesome bunch of friendly people. We play together for fun and enjoy every moments of soccer."
};
export default TextData

然后同步修改middleSection.js的导入和解构：

import React, { useState } from 'react';
// 导入变量名和导出的常量名保持一致
import TextData from "../data/textData1";
const MiddleSection = () => {
  const [showMore, setShowMore] = useState(false);
  // 现在解构text属性就可以正常获取值了
  const { text } = TextData;
  
  return (
    <div className='row'>
      <div className="middleTextContent">
        <p id="middleTextOverlay">
          {showMore ? text : `${text.substring(0, 50)}...`}
        </p>
        <button className='showMoreLess' onClick={() => setShowMore(!showMore)}>
          {showMore ? "Show less" : "Show More"}
        </button>
      </div>
    </div>
  )
}
export default MiddleSection;

额外提示 #

关于错误边界的建议，你可以创建一个类组件作为错误边界，包裹你的MiddleSection组件，这样后续如果组件出现其他意外错误，能及时捕获并展示友好的提示，避免页面直接崩溃。

内容的提问来源于stack exchange，提问作者soccerway