卡片組件沒有渲染任何東西。 反應引導

Question

我正在使用 bootstrap react 中的卡，但它沒有在屏幕上呈現任何內容，下面是我的代碼。 目前它正在顯示它但沒有按預期顯示，我嘗試修改它但它停止工作。

我很感激任何幫助。

function Products(props) {
  let params = useParams()
  let [ product, setProduct ] = useState()
  function loading() {
    return <div className="w-25 text-center"><Spinner animation="border" /></div>
    }
  function Products(products) {
    if (products === null) return;
    return products.map((product) => (
      <ListGroup.Item key={product.Id}>
        <Link to={`/products/${product.name}`} key={product.id}> {product.name}
        </Link>
      </ListGroup.Item>
    ));
  }

  let { id, name, description, price, origin, imgUrl } = product;
  return (
    <>
      <h1>Products</h1>
      <Card className="align-self-start w-25">
      <Card.Body>
      <Card.Title>{origin}</Card.Title>
      <Card.Text>
      <strong>Description:</strong> <span>{description}</span>
          <br/>
          <ProductContext.Consumer>
            {({ products }) => Products(products)}
          </ProductContext.Consumer>
          </Card.Text>
        </Card.Body>
      </Card>
    </>
  );
  if (product === undefined) return loading()
  return product.id !== parseInt(params.productId) ?  loading() : Products()

}

export default Products;

Answer 1

我不確定這是否與您的問題有關，但似乎如果產品未定義，您不會顯示loading()部分。 此代碼無法訪問，因為它位於組件 function 的return語句之后。

function Products(props) {
  let params = useParams();
  let [product, setProduct] = useState();
  function loading() {
    return (
      <div className='w-25 text-center'>
        <Spinner animation='border' />
      </div>
    );
  }

  if (product === undefined) return loading();

  let { id, name, description, price, origin, imgUrl } = product;
  return (
    <>
      <h1>Products</h1>
      <Card className='align-self-start w-25'>
        <Card.Body>
          <Card.Title>{origin}</Card.Title>
          <Card.Text>
            <strong>Description:</strong> <span>{description}</span>
          </Card.Text>
        </Card.Body>
      </Card>
    </>
  );
}

export default Products;

此外，您的名稱似乎可能會發生沖突：盡量避免在 function 中使用 function Products() ，該名稱已經稱為Products 。 我對這種情況的建議是創建 2 個不同的組件並將它們的代碼拆分為 2 個不同的文件；-)

Answer 2

我覺得您代碼中的邏輯不合理。 首先，useState 的product似乎沒有被使用或設置（至少在這個代碼片段中）。 products來自ProductContext.Consumer ，我們不知道它的代碼。

關於您要修復/查看的代碼的幾件事：

• 將const與useState一起使用
• 您沒有在此代碼段中使用您的useState getter 或 setter。
• 確保沒有本地聲明的名稱與導入或其他聲明沖突（或者將導入重命名import BootstrapComponent as BSComponent from "bootstrap"或為您的組件選擇一個唯一名稱）。 您有兩個嵌套的Products 。 scope 是否合理，請更有目的地將它們命名為Products和ProductsWrapper之類的。
• 正如 Xavier 所說，你有無法訪問的代碼

我的猜測是，要么你有命名沖突，要么消費者沒有按預期工作。 必須修復您的邏輯，也許將內部 Products function 移出以簡化您的操作。