reactjs - 在 react 钩子页面中实现显示更多和显示更少会抛出未定义的错误

在我的 React hooks 页面中尝试实现 Show More and Show less 时,我收到无法读取未定义的属性(读取子字符串)。有人可以建议可能是什么问题吗?组件出现上述错误:

at MiddleSection (http://localhost:3000/main.2efdffa93468c998df75.hot-update.js:92:82)
at div
at Home
at Routes (http://localhost:3000/static/js/bundle.js:41795:5)
at Router (http://localhost:3000/static/js/bundle.js:41728:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:40537:5)
at App

考虑向树中添加错误边界以自定义错误处理行为。访问 https://reactjs.org/link/error-boundaries 了解有关错误边界的更多信息。 logCapturedError @ react-dom.development.js:18525 update.callback @ react-dom.development.js:18558 callCallback @ react-dom.development.js:13092

未捕获的TypeError :无法在 MiddleSection (middleSection.js:56:1) 读取未定义的属性(读取“子字符串”)

// textData1.js
        import React from 'react';
    
        const TextData ="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 data1 from "../data/textData1";
    const MiddleSection = () => {
         const [showMore, setShowMore] = useState(false);
         const { text } = TextData;
    
        return (
                   <div className='row'>
                        <div className="middleTextContent">
                            <p id="middleTextOverlay">
                                {showMore ? text : `${text.substring(0, 50)} `}
                                 <button className='showMoreLess' onClick={ () => 
                                    setShowMore(!showMore)}>
                                    {showMore ? "Show less": "Show More"}
                                 </button>
                            </p> 
                        </div>
                    </div>
     )
    }
    export default MiddleSection;

回答1

您可能遇到此问题的原因有两个:

  1. middleSection.js 文件的范围内没有 TextData 变量
  2. TextData 作为字符串从 textData1.js 导出,因此它不能被解构

替换以下行

text.substring(0, 50)

经过

data1.substring(0, 50)

并删除线

const { text } = TextData;

回答2

TextData 是一个字符串,所以当你用 const { text } = TextData 解构它时,text(它不是字符串的属性)应该是未定义的。

如果您删除解构然后直接引用 TextData ,它应该可以工作。

相似文章