React中如何将选中的产品数据传递给子组件？

你遇到的核心问题是没有用React状态管理选中的产品：你用普通变量focussedProduct存储选中数据，修改它不会触发父组件重新渲染，子组件也就无法接收到更新后的props。

修复步骤 #

1. 父组件改用React状态管理选中产品 #

把普通变量替换成useState状态，这样修改状态时会自动触发组件重渲染，子组件就能拿到最新数据：

import { useState } from 'react';

// 初始化状态为null或者空对象，根据你的产品结构调整
const [focussedProduct, setFocussedProduct] = useState(null);

const viewProduct = (productID) => {
  // 优化：用find代替filter，直接返回匹配的单个产品（更高效）
  const selected = focusProduct.find(e => e.id === productID);
  // 如果你的productID确实是数组下标，就用e => index === productID，但更建议用id匹配
  setFocussedProduct(selected);
  console.log(selected);
};

点击事件部分保持不变：

<div className='product' key={product.id} onClick={() => viewProduct(product.id)}>

传递props给子组件：

<Product focussedProduct={focussedProduct} />

2. 子组件完善渲染逻辑 #

子组件可以根据接收的props做渲染，同时处理初始值为null的情况：

import React from "react";

const Product = (props) => {  
  console.log(props.focussedProduct);

  // 如果没有选中产品，返回提示或者空
  if (!props.focussedProduct) {
    return <div>请选择一个产品</div>;
  }

  // 渲染产品内容
  return (
    <div className="product-detail">
      <h2>{props.focussedProduct.name}</h2>
      <p>{props.focussedProduct.description}</p>
      {/* 其他产品信息 */}
    </div>
  );
};

export default Product;    

额外提示 #

• 你原来用filter返回数组再取focussedProduct[0]，用find可以直接拿到单个匹配项，更高效。
• 确保focusProduct是父组件中正确的产品列表数据源。
• 避免用数组下标index作为匹配条件，产品的id才是唯一标识，逻辑更可靠。

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