Saya hanya mencoba melewati alat peraga melalui komponen dan merendernya di jsx tetapi entah bagaimana itu tidak berhasil. Saya sedang mencari masalah tetapi tidak dapat menemukannya.

Saya mencoba melewati alat peraga dari komponen ini:

import React from "react";
import "../styles/Products.css";
import ProductItem from "../items/ProductItem";
class Products extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }
  componentDidMount() {
    fetch("../products.json")
      .then(response => response.json())
      .then(response => this.setState({ data: response.products }));
  }
  render() {
    return (
      <div className="products-container">
        <ProductItem data={this.state.data[0]} />
      </div>
    );
  }
}
export default Products;

Ke komponen ini:

import React from "react";
import "../styles/ProductItem.css";
const ProductItem = props => {
  console.log(props.data, "current");
  return (
    <div className="product-item">
      <img src="" alt="" className="bike-image" />
      <div className="active-product" />
      <div className="view-details">Compare</div>
      <h2>Bike</h2>
      <h4>downhill bike</h4>
      <p>3500 PLN</p>
    </div>
  );
};
export default ProductItem;

Dan masalahnya adalah ketika saya mencari di react dev tools saya, alat peraga telah lulus dengan benar, tetapi ketika saya mencoba untuk mendapatkan atribut objek seperti props.data.id, saya mendapatkan kesalahan:

Tidak dapat membaca properti 'id' dari undefined

0
DSobisz 15 Maret 2020, 14:43

1 menjawab

Jawaban Terbaik

fetch memerlukan waktu untuk mendapatkan respons dan mengisi larik this.state.data. Jadi, Anda perlu memeriksa apakah nilai this.state.data[0] benar-benar tersedia atau tidak. Anda dapat mencoba ini-

  render() {
    return (
      <div className="products-container">
       {this.state.data && this.state.data.length > 0 &&  <ProductItem data={this.state.data[0]} />}
      </div>
    );
  }
2
Sajeeb Ahamed 15 Maret 2020, 11:58