can't display data form json object with Object.values and .map in React

Question

I'm trying to change my API from containing array to containing object. I tried to map my object so I can use it on bootstrap card. it's show error Uncaught TypeError: Cannot read properties of undefined (reading 'map'). How can I fix this ? also the console.log show 0 array meanwhile it suppose to be 1

here's my object example:

{
    "count": 1,
    "next": null,
    "previous": null,
    "results": [
        {
            "id": 1,
            "name": "Monitor LG 24 INch",
            "description": "Ini adalah sebuah monitor",
            "weight": 1,
            "price": 13,
            "stock": 2,
            "datetime_added": "2022-02-21T12:27:06.878894Z",
            "image": "http://127.0.0.1:8000/products/dsada.jpg",
            "brand": {
                "id": 1,
                "name": "LG",
                "image": null
            },
            "category": {
                "id": 1,
                "name": "Electronic",
                "image": null
            }
        }
    ]
}

my app code:

const Categorized = () => {
 const [getData, setGetData] =useState([]);

 useEffect(()=>{ 
    axios.get(`http://127.0.0.1:8000/data/products/?format=json`).then(res => {
        const products = Object.values(res.data);
        setGetData(products);
      })
 }, []);

 console.log(getData)

  return (
    <Row>
      {getData && getData.results.map(product =>{
        const {id, category,image} = product;
        return(
        <Col lg={3} className="d-flex">
          <Card key={id} className="productlist flex-fill">
            <Card.Img variant="top" src={image} width="50%"/>
            <Card.Body>
              <Card.Title>{category}</Card.Title>
            </Card.Body>
          </Card>
        </Col>
        )
      })}
    </Row>
  )
}

Answer 1

It's better to set the raw data instead of Object.values

const Categorized = () => {
 const [getData, setGetData] =useState([]);

 useEffect(()=>{ 
    axios.get(`http://127.0.0.1:8000/data/products/?format=json`).then(res => {
        setGetData(res.data); // set data directly
      })
 }, []);

 console.log(getData)

  return (
    <Row>
      {getData && getData.results.map(product =>{
        const {id, category,image} = product;
        return(
        <Col lg={3} className="d-flex">
          <Card key={id} className="productlist flex-fill">
            <Card.Img variant="top" src={image} width="50%"/>
            <Card.Body>
              <Card.Title>{category}</Card.Title>
            </Card.Body>
          </Card>
        </Col>
        )
      })}
    </Row>
  )
}

Answer 2

Try this:

const Categorized = () => {
 const [getData, setGetData] = useState([]);

 useEffect(()=>{ 
    axios.get(`http://127.0.0.1:8000/data/products/?format=json`).then(res => {
        setGetData(products);
        console.log(getData)
      })
 }, []);



  return (
    <Row>
      {getData && getData.results.map(product =>{
        
        return(
        <Col lg={3} className="d-flex">
          <Card key={product.id} className="productlist flex-fill">
            <Card.Img variant="top" src={product.image} width="50%"/>
            <Card.Body>
              <Card.Title>{product.category}</Card.Title>
            </Card.Body>
          </Card>
        </Col>
        )
      })}
    </Row>
  )
}