No-unused-expressions 问题 React

Question

我正在用 React 制作一个电子商务网站。有一个 ProductList.js 列出了 Product.js 的代码。我正在使用从 context.js 创建的上下文 API。 context.js的代码是-

    state = {
    products: [],
    detailProduct,
   };
   getItem = (id) => {
     let product = this.state.products.find((item) => item.id === id);
     return product;
   };
    
   handleDetail = (id) => {
     let product = this.getItem(id);
     this.setState(() => {
       return { detailProduct: product };
     });
   };
    
   addToCart = (id) => {
     console.log(`Hello from Add to Cart. Id is: ${id}`);
   };
   render() {
     return (
      <ProductContext.Provider
         value={{
           ...this.state,
           handleDetail: this.handleDetail,
           addToCart: this.addToCart
         }}
      >
        {this.props.children}
      </ProductContext.Provider>
     );
   }

这肯定不是完整的代码。如果你需要完整的代码，我也可以给。

Product.js的代码是-

<ProductConsumer>
        {(value) => {
          <div className="p-5 img-container" onClick={() => value.handleDetail(id)}>
            <Link to="/details">
              <img src={img} className="card-img-top" alt="Product Image" />
            </Link>
            <button className={inCart ? "in-cart cart-btn" : "cart-btn"} disabled={inCart ? true : false} onClick={() => value.addToCart(id)}>
              {inCart ? (
                <p className="text-capitalize mb-0" disabled>
                  Already in cart
                </p>
              ) : (
                <i className="fas fa-cart-plus"></i>
              )}
            </button>
          </div>
        }}
      </ProductConsumer>

我得到的错误--

./src/components/Product.jsx
  Line 13:15:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

Search for the keywords to learn more about each error.

请帮我解决这个问题...

Answer 1

您正在消费者块中使用大括号 {。像这样将这些更改为括号：

<ProductConsumer>
        {(value) => (
          <div className="p-5 img-container" onClick={() => value.handleDetail(id)}>
            <Link to="/details">
              <img src={img} className="card-img-top" alt="Product Image" />
            </Link>
            <button className={inCart ? "in-cart cart-btn" : "cart-btn"} disabled={inCart ? true : false} onClick={() => value.addToCart(id)}>
              {inCart ? (
                <p className="text-capitalize mb-0" disabled>
                  Already in cart
                </p>
              ) : (
                <i className="fas fa-cart-plus"></i>
              )}
            </button>
          </div>
        )}
      </ProductConsumer>

阅读此答案以获得解释：

No-unused-expressions 问题 React

No-unused-expressions issue React

npm

reactjs

react-redux

npm-start

react-context