Question

无法在 React 中使用 Object.values 和 .map 显示 json 对象的数据

2022-02-22

170

reactjs

我试图将我的 API 从包含数组更改为包含对象。我尝试映射我的对象，以便可以在引导卡上使用它。它显示错误 Uncaught TypeError：无法读取未定义的属性（读取“map”）。我该如何修复它？此外，console.log 显示 0 个数组，而它应该是 1

这是我的对象示例：

{
    "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
            }
        }
    ]
}

我的应用程序代码：

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

最好设置原始数据，而不是 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

尝试一下：

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>
  )
}