在 react hooks 页面中实现 show more 和 show less 抛出 undefined 错误

Question

尝试在我的 React 挂钩页面中实现 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@反应-dom.development.js:18558 callCallback @ react-dom.development.js:13092
未捕获的类型错误：无法读取未定义的属性（读取 'substring'）在 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;

Answer 1

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

如果去掉解构然后直接引用TextData，应该可以。

Answer 2

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

middleSection.js 文件范围内没有 TextData 变量
TextData 从 textData1.js 导出为字符串，因此无法解构

替换以下行

text.substring(0, 50)

来自

data1.substring(0, 50)

并删除行

const { text } = TextData;

在 react hooks 页面中实现 show more 和 show less 抛出 undefined 错误

Implement show more and show less in react hooks page throws error of undefined

reactjs

react-hooks