首页 > 解决方案 > 布尔值不会被子常量继承

问题描述

我正在尝试通过 showRemoveFromCart 读取 removefromcart 的值,但它不起作用,它没有呈现从购物车中删除按钮。但由于某种原因,我可以读取 addtoCart 的值,但不能读取 removefromcart。我认为这段代码应该可以工作,但 Visual Studio 代码说 removefromcart 的值已声明但从未读取。

import ImageHelper from "./helper/ImageHelper"
import {Redirect} from "react-router-dom"
import { addItemToCart, removeItemFromCart } from "./helper/cartHelper"

const isAuthenticated = true

const Card = ({product, addtoCart = true, removefromcart = true}) => {
    
    const cartTitle = product ? product.name : "A photo from pexels"
    const cartDescription = product ? product.description : "Default description"
    const cartPrice = product ? product.price : "Default"
    const addToCart = () => {
      if (isAuthenticated) {
        addItemToCart(product, () => {})
        console.log("Added to cart")
      }
      else {
        console.log("Login please")
      }
    }
    const getAredirect = (redirect) => {
      if (redirect) {
        return <Redirect to="/cart"/>
      }
    }
    const showAddToCart = addtoCart => {
      return (
        addtoCart && (<button
          onClick={addToCart}
          className="btn btn-block btn-outline-success mt-2 mb-2"
        >
          Add to Cart
        </button>)
      )
    }
    const showRemoveFromCart = removefromcart => {
      return (
        removefromcart && (
          <button
                onClick={() => {
                  removeItemFromCart(product._id)
                  console.log("Product removed")
                }}
                className="btn btn-block btn-outline-danger mt-2 mb-2"
              >
                Remove from cart
              </button>
        )
      )
    }
    return (
      <div className="card text-white bg-dark border border-info ">
        <div className="card-header lead">{cartTitle}</div>
        <div className="card-body">
          <ImageHelper product={product}/>
          <p className="lead bg-success font-weight-normal text-wrap">
            {cartDescription}
          </p>
          <p className="btn btn-success rounded  btn-sm px-4">{cartPrice}</p>
          <div className="row">
            <div className="col-12">
              {showAddToCart(addtoCart)}
            </div>
            <div className="col-12">
              {showRemoveFromCart()}
            </div>
          </div>
        </div>
      </div>
    );
  };

export default Card ```

标签: node.jsreactjs

解决方案


您在此行重新声明removefromcart作为函数的参数:

const showRemoveFromCart = removefromcart => {

由于您在没有任何参数的情况下调用此函数,因此您的代码中的条件永远不会满足。您可以将函数更改为不使用任何参数,它应该可以工作。

const showRemoveFromCart = () => {


推荐阅读