Javascript 无法读取属性'；地图'；未定义的错误。反应类型脚本

我这里有这个密码。我一直收到一个错误：

TypeError:无法读取未定义的属性“map”

以下是一些事实：

我从前端javascript文件获取数据。所以不应该有任何异步问题

singleCategory.title

始终正确显示

只有在刷新页面时才会发生错误。如果我注释掉地图代码并添加代码。这样React就可以在不刷新的情况下注入它。它起作用了。我只有在刷新页面或尝试导航到页面时才会出错

为什么

singleCategory.title

显示正确，但“使用地图”未定义？此外，映射仅在刷新时未定义。如果代码被注入，它就会正常工作

const CoursesCategories: React.FC = () => {
    const [singleCategory, setSingleCategory] = useState<CategoriesInterface>([] as any);

    useEffect(() => {
        const fullUrl = window.location.href;
        const segments = new URL(fullUrl).pathname.split('/');
        const id = segments.pop() || segments.pop();

        for (let category of Categories ) {
            if (category.url === id) {
                setSingleCategory(category);
                console.log(singleCategory)
            }
        }
    }, [singleCategory]);


    return (
        <div>
            {
                singleCategory.courses !== [] ? (
                    <div>
                        <CategoryTitle title={singleCategory.title} />

                        <div className={wrapper.headerWrapper}>
                            {
                                singleCategory.courses.map((course: CoursesInterface) => (
                                    <h2 key={course.id}>{course.title}</h2>
                                    )
                                )
                            }
                        </div>
                    </div>
                ) : ''
            }

        </div>
    )
}

const课程类别：React.FC=（）=>{
const[singleCategory，setSingleCategory]=useState（[]如有）；
useffect（（）=>{
const fullUrl=window.location.href；
const segments=新URL（fullUrl）.pathname.split（'/'）；
const id=segments.pop（）| | segments.pop（）；
for（让类别中的类别）{
如果（category.url==id）{
设置SingleCategory（类别）；
console.log（singleCategory）
}
}
}，[单一类别]；
返回(
{
singleCategory.courses！=[](
{
singleCategory.courses.map（（课程：课程界面）=>(
{课程名称}
)
)
}
) : ''
}
)
}

编辑1。如果我这样写的话，我会得到

无法读取未定义的属性“length”

{singleCategory.courses.length>0&&singleCategory.courses.map（（课程：课程界面）=>(
{课程名称}
)
)}

由于您使用的是typescript，因此可以使用：

{singleCategory.courses？.length>0
&&singleCategory.courses？.map（（课程：课程界面）=>(
{课程名称}
)
)}

---

因为在第一次渲染时，该属性不可用。

useffect

在第一次渲染后运行，因此未在该渲染上定义singleCategory。通常有条件地渲染贴图，并在第二次渲染时使用获取的数据进行渲染。将条件渲染添加到.map（）

{singleCategory.courses.length>0&&singleCategory.courses.map（…）}

{ singleCategory.courses.length > 0 && singleCategory.courses.map((course: CoursesInterface) => (
                                    <h2 key={course.id}>{course.title}</h2>
                                )
                            )}

{ singleCategory.courses?.length > 0
    && singleCategory.courses?.map((course: CoursesInterface) => (
                                    <h2 key={course.id}>{course.title}</h2>
                                )
  )}