访问嵌套对象项

Question

我正在获取数据我也有嵌套数据。

我有一个品牌属性，我正在尝试显示它并尝试实现点击 setCurrentSelectedBrand 逻辑来显示该特定品牌 [对象] 的数据。我在正确的轨道上吗？

主要组件

const Cars = () => {

  const {brands, cars, handleSelectBrand} = useContext(CarsContext)

    return (
        <div>
        {brands.map((brand)=>{
          return(
            <div         
            onClick={() => handleSelectBrand(brand)}>  
            {brand}         
              </div>
          )
        })}
        <CarsDetails />
        </div>
    )
}

export default Cars

数据

[{
   "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 [isLoading, setIsLoading] = useState(false);
const [cars, setCars] =useState<ICars[]>([])
const [brands, setBrands] = useState([])
const [currentSelectedBrand, setCurrentSelectedBrand] = useState('')   

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

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

    fetchData()
},[brands, cars])