javascript - 从嵌套的 json Api 迭代数据时遇到问题

Question

我正在获取数据

我有一个品牌属性，我正在尝试显示它，我正在尝试实现一个点击setCurrentSelectedBrand逻辑来显示该特定品牌[对象]的数据。目前我TypeError: Cannot read property 'brand' of undefined在主组件中遇到错误，我不知道为什么

数据

[{
   "a_class":[
   {    
    "brand":"A-class",
    "id":"1",
    "year":"2015"
    "price":"12665"
    ...
    "engine_spec":{
     ...
     }
     ...
      }],

   "b_class":[
   {    
    "brand":"B-class",
    "id":"2",
    "year":"2016"
    "price":"12665"
    ...
    "engine_spec":{
     ...
     }
     ...
      }],
}
]

主要部件

const Cars = () => {

  const { cars, handleSelectBrand} = useContext(CarsContext)
    return (
        <div>
          {Object.keys(cars).map((key:any, index)=>{
            let brands:any = cars[key];
            return (     
              <div key={key} onClick={() => handleSelectBrand(key)} className='brand__list' >
              {brands[0].brand}
              </div>                  
              );})}
        <CarsDetails />
        </div>
    )
}

export default Cars

语境

declare module 'axios' {
  export interface AxiosResponse<T = any> extends Promise<T> {}
}

export const CarsProvider:React.FC <IProps> = ({ children }  ) => {

const [isLoading, setIsLoading] = useState(false);
const [cars, setCars] =useState< any | ICars[] >([])
const [brands, setBrands] = useState([])
const [currentSelectedBrand, setCurrentSelectedBrand] = useState('')   

const handleSelectBrand = React.useCallback((brand) => {
  return setCurrentSelectedBrand(cars[brand]);
},[cars])

useEffect(()=>{
  const fetchData = async () => {
    setIsLoading(true);
    const response = await api.get('/cars', {
    });  
    setIsLoading(false)
    setCars([...response.data]);
    setCurrentSelectedBrand(response[Object.keys(response)[0]]);
    console.log(response.data)
  };
   

    fetchData()
},[brands, cars])

标签： javascriptarraysreactjstypescriptapi