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

Question

我这里有这个代码。我不断收到错误：

类型错误：无法读取未定义的属性“map”。

以下是一些事实：

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

2. singleCategory.title始终正确显示。

3. 仅当我刷新页面时才会发生该错误。如果我注释掉地图代码并添加代码。这样 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>                                )  )}因为在第一次渲染时该属性不可用。