无法读取未定义错误的属性“映射”。反应打字稿

Question

我这里有这个代码。我不断收到错误：类型错误：无法读取未定义的属性“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>    )}编辑1.如果我这样写我就明白了。无法读取未定义的属性“长度”{ singleCategory.courses.length > 0 && singleCategory.courses.map((course: CoursesInterface) => (                                    <h2 key={course.id}>{course.title}</h2>                                )                            )}

Answer 1

{ singleCategory.courses?.length > 0

    && singleCategory.courses?.map((course: CoursesInterface) => (

                                    <h2 key={course.id}>{course.title}</h2>

                                )

  )}

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