react，FilterTitle报错Uncaught TypeError: Cannot read properties of undefined (reading 'area')？

Question

在使用的react版本如下：

已写的代码：

import React from 'react'

// import { Flex } from 'antd-mobile'
import { DownOutline } from 'antd-mobile-icons'
import styles from './index.module.css'

// 条件筛选栏标题数组：
const titleList = [
  { title: '区域', type: 'area' },
  { title: '方式', type: 'mode' },
  { title: '租金', type: 'price' },
  { title: '筛选', type: 'more' }
]

export default function FilterTitle({ titleSelectedStatus, onClick }) {
  return (
    // <Flex align="center" className={styles.root}>
    <div align="center" className={styles.root}>
      {titleList.map(item => {
      {/* {titleList && titleList.map(item => { */}
        // item.type => 'area'
        const isSelected = titleSelectedStatus[item.type]
        return (
          // <Flex.Item key={item.type} onClick={() => onClick(item.type)}>
          <div key={item.type} onClick={() => onClick(item.type)}>
            {/* 选中类名： selected */}
            <span
              className={[
                styles.dropdown,
                isSelected ? styles.selected : ''
              ].join(' ')}
            >
              <span>{item.title}</span>
              <i className='icon-arrow'><DownOutline /></i>
            </span>
            </div>
          // </Flex.Item>
        )
      })}
    </div>
    // </Flex>
  )
}

chrome浏览器报错：

请问代码出了什么问题？如何修改？

Answer 1

调用组件时传给组件的titleSelectedStatus参数没有"area"属性.
要看一下你调用FilterTitle组的代码才能确定错误在哪?