React数组映射中，点击时如何将食谱、图片存入状态并传递产品名称

问题根源 #

原来的实现依赖e.target.innerHTML获取产品名称，这种方式不仅不可靠（比如DOM结构变动或名称包含特殊字符时会出问题），而且无法直接拿到对应的食谱和图片数据——其实这些数据原本就在你的数组里，完全没必要绕DOM一圈。

解决步骤 #

1. 修改列表项的点击事件，直接传递完整产品数据
   在映射产品列表时，把当前产品的完整数据数组（包含名称、食谱、图片）作为参数传给点击处理器，而不是依赖事件对象：

return (
  <div className="box list">
    {this.props.products.map((product, ind) => (
      <div key={ind}>
        <h2>{product.category}</h2>
        {Object.values(product.products).map((productData) => (
          // 直接把包含名称、食谱、图片的数组传给点击方法
          <li onClick={() => this.props.handleClickedProduct(productData)}>
            {productData[0]}
          </li>
        ))}
      </div>
    ))}
  </div>
);

2. 更新点击处理器，存储完整数据并传递名称
   现在handleClickedProduct接收的是完整的产品数据数组，你可以直接解构出需要的字段存入state；如果需要向前传递产品名称，也能在这里直接处理：

handleClickedProduct = (productData) => {
  // 解构数组里的三个元素：名称、食谱、图片
  const [productName, recipe, photo] = productData;
  
  // 将完整数据存入state
  this.setState({
    clickedProduct: {
      name: productName,
      recipe: recipe,
      photo: photo
    }
  });
  
  // 如果需要向前传递产品名称（比如给父组件），直接用productName即可
  // 示例：this.props.onProductNamePassed(productName);
};

为什么这样更好？ #

• 数据来源可靠：直接从你的props/state里拿数据，不依赖DOM内容，避免了DOM结构变化带来的潜在bug。
• 逻辑更清晰：一次传递完整数据，后续扩展其他字段（比如产品ID）也更方便。

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