單擊按鈕時無法呈現反應組件

Question

我有兩個組件： MainContainer和Cart 。 在MainContainer中，我有一個按鈕，當單擊它時，它會調用一個帶有id參數的函數addToCart ，然后它必須呈現Cart組件。 我將該參數作為道具傳遞，然后在Cart組件中提取道具值。 W當我單擊按鈕時，組件未呈現。 也沒有錯誤。

MainContainer.js

import React, { useState } from "react";
import Cart from "./Cart";
import { data } from "./data";
import { Link } from "react-router-dom";

function MainContainer() {
  function addToCart(id) {
    return (
      <div>
        <Cart id={id}></Cart>
      </div>
    );
  }

  return (
    <div className=" grid grid-cols-6">
      {data.map((item) => (
        <div
          key={item.id}
          className="  w-52 h-64 m-6 flex flex-col bg-gray-100 shadow-lg border-gray-200 border p-4 items-center justify-center rounded-lg relative"
        >
          <Link to="/cart">
            {" "}
            <i
              className="fa-solid fa-cart-plus absolute top-3 right-3 cursor-pointer text-lg"
              onClick={() => addToCart(item.id)}
            ></i>
          </Link>
          <img className=" w-32 h-32" src={item.image} alt="" />
          <div className=" bg-gray-300 w-full p-2 rounded-lg mt-2 text-center">
            <p className=" font-semibold text-lg"> {item.name}</p>
            <p>$ {item.price}</p>
            <p>{item.rating}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

export default MainContainer;

購物車.js

import React from "react";

function Cart(props) {
  return (
    <div>
      <h1>hi {props.id} </h1>
    </div>
  );
}

export default Cart;

Answer 1

addToCart是一個回調，它不能返回要渲染的 JSX。 您可以將id存儲在本地組件狀態中，然后在填充id狀態時有條件地呈現Cart組件。

例子：

function MainContainer() {
  const [id, setId] = React.useState(); // <-- initially undefined

  function addToCart(id) {
    setId(id); // <-- defined
  }

  return (
    <div className=" grid grid-cols-6">
      {data.map((item) => (
        <div
          key={item.id}
          className="...."
        >
          <Link to="/cart">
            <i
              className="...."
              onClick={() => addToCart(item.id)}
            />
          </Link>
          <img className=" w-32 h-32" src={item.image} alt="" />
          <div className="....">
            <p className=" font-semibold text-lg"> {item.name}</p>
            <p>$ {item.price}</p>
            <p>{item.rating}</p>
          </div>
        </div>
      ))}

      {id && (
        <div>
          <Cart id={id} /> {/* render Cart if id defined */}
        </div>
      )}
    </div>
  );
}