React中按Weight变体展示MRP失效，求助解决方法

在React中实现根据产品Weight变体展示对应MRP的功能，手动传递产品变体Weight值时功能正常，但通过e.target.value传递值时功能失效。

import React, { useState } from "react";

import "./App.css";

function App() {
  const product = {
    productName: "IndoPrimo Men's Regular Fit Cotton Casual Shirt",
    productCategory: "HUMJOLI",
    image: "../images/I/71ZFayjCD-L._UL1500_.jpg",
    maxQty: 5,
    minQty: 1,
    unit: "gram",
    variantNames: ["weight"],
    variants: [
      { weight: 500, mrp: 100, storePrice: 80 },
      { weight: 1000, mrp: 200, storePrice: 140 },
    ],
    productMrp: 2199,
    productStoreprice: 7189,
  };
  const [sate, setSize] = React.useState([]);
  const handleBtn = (e) => {
    const id = e.target.value;
    console.log(id);
    const updatei̥tem = product.variants.filter((r) => {
      return r.weight === id;
    });
    setSize(updatei̥tem);
   
  };

  return (
    <div>
      <select name="r" onChange={(e) => handleBtn(e)}>
        {product.variants.map((i) => (
          <option value={i.weight} key={i.weight}>
            {i.weight}
          </option>
        ))}
      </select>
      
      <div>
        {sate?.map((i) => (
          <p>{i.mrp}</p>
        ))}
      </div>
    </div>
    
  );
}

问题核心原因：e.target.value获取到的是字符串类型，而product.variants中的weight是数字类型，使用全等运算符===比较时类型不匹配，导致过滤结果为空。

修改步骤：

1. 将e.target.value转换为数字类型，可使用Number(id)或+id实现。
2. 优化状态存储：因为每次仅选择一个变体，用find替代filter更合适（find返回匹配的单个对象，而非数组），同时将状态初始值设为null或空对象，渲染时更简洁。

修改后的代码：

import React, { useState } from "react";

import "./App.css";

function App() {
  const product = {
    productName: "IndoPrimo Men's Regular Fit Cotton Casual Shirt",
    productCategory: "HUMJOLI",
    image: "../images/I/71ZFayjCD-L._UL1500_.jpg",
    maxQty: 5,
    minQty: 1,
    unit: "gram",
    variantNames: ["weight"],
    variants: [
      { weight: 500, mrp: 100, storePrice: 80 },
      { weight: 1000, mrp: 200, storePrice: 140 },
    ],
    productMrp: 2199,
    productStoreprice: 7189,
  };
  // 初始状态设为null，存储单个选中的变体对象
  const [selectedVariant, setSelectedVariant] = useState(null);

  const handleBtn = (e) => {
    // 将字符串值转为数字
    const selectedWeight = Number(e.target.value);
    // 用find匹配单个变体
    const matchedVariant = product.variants.find(r => r.weight === selectedWeight);
    setSelectedVariant(matchedVariant);
  };

  return (
    <div>
      <select name="r" onChange={handleBtn}>
        {product.variants.map((i) => (
          <option value={i.weight} key={i.weight}>
            {i.weight}
          </option>
        ))}
      </select>
      
      <div>
        {/* 直接渲染选中变体的MRP，无需map */}
        {selectedVariant && <p>{selectedVariant.mrp}</p>}
      </div>
    </div>
  );
}

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