почему я не могу получить доступ к данным в операторе возврата, но только в консоли?

Question

Я пытаюсь передать данные (в основном объект массива), используя Context в React js. Я получаю данные на дочернем узле, которые я вижу в консоли, но когда я пытаюсь их отобразить, я получаю

TypeError: Невозможно прочитать свойство 'id' из неопределенного

Я пытался найти идеи, найденные здесь, и в Google не удалось пройти. Я пытался отправить строковые объекты в другой проект, он работает, но когда я пытаюсь сделать это, моя главная проблема, я получаю эту ситуацию.

// Context.js

// imports...

export const ProductContext = React.createContext();

class ProductProvider extends React.Component {
  constructor() {
    super();
    this.state = {
      products: storeProducts, //storeProducts comes from external dataset
      available: "yes",
      drink: "Coca-Cola",
      type: "soft",
      price: 1.5
    };
    this.handleDetail = this.handleDetail.bind(this);
  }

  handleDetail(e) {
    console.log("hello from detail handler");
    // alert()
  }

  addToCart() {
    console.log("hello from addToCart");
  }

  render() {
    const providerData = {
      value: this.state,
      handleDetail: this.handleDetail()
    };
    return (
      <div>
        <ProductContext.Provider value={providerData}>
          {this.props.children}
        </ProductContext.Provider>
      </div>
    );
  }
}
const ProductConsumer = ProductContext.Consumer;

export { ProductConsumer, ProductProvider };

-

// list.js
// imports...
export default class ProductList extends Component {
  constructor() {
    super();
  }

  render() {
    //console.log("FOR NOW ",this.state.products)
    return (
      <div>
        <ProductContext.Consumer>
          {data => {
            return data.value.products.map(
              //products contains data of products
              product => {
                return <Product key={product.id} product={product} />;
              }
            );
          }}
        </ProductContext.Consumer>
        <Product />
      </div>
    );
  }
}

-

// Product.js

// import....

export default class Product extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    console.log(this.props.product); //here i can see all the items present in
    dataset;
    return (
      <h1>Product name : {this.props.product.name} </h1>
      // i get error at this point
    );
  }
}

Я думаю, что я должен получить данные, отображаемые в консоли, при возврате функции рендеринга. Но я не нашел, где я делаю ошибку

Answer 1

Странно, что это работало, когда id делал это в Productlist.js (Context.Consumer):

<ProductContext.Consumer>
                {data => {
                  return data.value.products.map
                  (
                      product => 
                    {
                      **return <Product key={product.id} product={product} name={product.name} price={product.price}/>**  //everything in same line ..don't know why 
                    }
                  )
                }}
              </ProductContext.Consumer>

Пожалуйста, не стесняйтесь объяснять, почему это сработало, а не мой предыдущий ... в основном не сделалмного изменений

Answer 2

Просматривая код, я нахожу одну запутанную часть.

Там, где был компонент <Product /> без передачи реквизита.

попробуйте изменить свой код в list.jsвот так, надеюсь, это поможет:

list.js

// imports...
export default class ProductList extends Component {
  constructor() {
    super();
  }

  render() {
    //console.log("FOR NOW ",this.state.products)
    return (
      <div>
        <ProductContext.Consumer>
          {data => {
            return data.value.products.map(
              //products contains data of products
              product => {
                return <Product key={product.id} product={product} />;
              }
            );
          }}
        </ProductContext.Consumer>
      </div>
    );
  }
}