点击按钮无法渲染React Cart组件且无报错问题求助

组件不渲染是两个逻辑错误导致的：

• React的事件回调函数里直接return JSX不会被渲染到页面上，只有写在组件主return逻辑里、受状态控制的JSX才会被挂载到渲染树。你写的addToCart函数虽然返回了Cart组件，但这个返回值没有被插入到页面结构里，执行了也不会有视觉效果。
• 你用Link组件包裹了加购按钮，点击后会直接跳转到/cart路径，但你没有给这个路由配置Cart组件的渲染规则，跳转后自然看不到内容，路由跳转行为也会打断当前页的执行逻辑，进一步导致组件无法显示。

根据你要实现的效果，二选一即可：

方案1：当前页触发加购后显示Cart组件 #

去掉包裹按钮的Link标签，用状态存储加购的商品id，通过状态控制Cart的渲染，修改后的MainContainer.js代码如下：

import React, { useState } from "react";
import Cart from "./Cart";
import { data } from "./data";

function MainContainer() {
  // 存储加购的商品id，初始值为null时不渲染Cart
  const [cartItemId, setCartItemId] = useState(null);

  const addToCart = (id) => {
    // 更新状态，状态变更会自动触发组件重新渲染
    setCartItemId(id);
  };

  return (
    <div className="grid grid-cols-6">
      {/* 当cartItemId有值时才渲染Cart组件 */}
      {cartItemId && (
        <div>
          <Cart id={cartItemId} />
        </div>
      )}
      {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"
        >
          <i
            className="fa-solid fa-cart-plus absolute top-3 right-3 cursor-pointer text-lg"
            onClick={() => addToCart(item.id)}
          />
          <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;

原有Cart.js代码不需要修改，点击加购按钮即可正常显示组件和传入的id。

方案2：点击后跳转到独立购物车页面 #

如果你要保留点击跳转到/cart的逻辑，需要先在路由配置中给/cart路径绑定Cart组件，再通过路由状态传递商品id：

1. 修改MainContainer.js中的Link部分，去掉i标签上多余的onClick，直接通过Link的state传参：

<Link to="/cart" state={{ selectedItemId: item.id }}>
  <i
    className="fa-solid fa-cart-plus absolute top-3 right-3 cursor-pointer text-lg"
  />
</Link>

2. 修改Cart.js，从路由位置对象中取出传递的id：

import React from "react";
import { useLocation } from "react-router-dom";

function Cart() {
  const { state } = useLocation();
  return (
    <div>
      <h1>hi {state?.selectedItemId}</h1>
    </div>
  );
}

export default Cart;

内容的提问来源于stack exchange，提问作者Gurudatt Puranik