尝试在我的 React hooks 页面中实现 显示更多和显示更少 时，我收到无法读取未定义的属性（读取子字符串）的错误。有人可以建议可能是什么问题吗？ 组件中发生了上述错误：

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;