Question

我试图在React js中使用Context传递数据（基本上是一个数组对象）。我确实在控制台上可以看到的子节点上接收到数据，但是当我尝试将其渲染为dom时，我会得到

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

浏览完代码后，我发现了一个令人困惑的部分。

存在<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>
    );
  }
}

Answer 2

当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>

请随时解释为什么这样做有效，而不是我以前的...基本上没有做太多更改

为什么我不能仅在控制台中在return语句中访问数据？

2 个答案: