React组件问题：如何从数组获取items的code并在模态框函数中使用

步骤1：新增状态存储目标code值 #

在组件的状态定义区域添加一个状态，专门用来保存从transformationDetails中获取到的code：

const [itemCode, setItemCode] = useState('');

步骤2：在handleGenerateBarcode中提取并存储code #

修改handleGenerateBarcode函数，找到匹配的transformationDetail后，从中取出items.code并更新状态：

const handleGenerateBarcode = (e, item, detailID, qty) => {
  e.preventDefault();
  
  const transformationDetailID = item?.transformationDetailBarcode.filter((obj) => obj.transformationDetailId === item.id);
  // 用find替代filter，直接获取匹配的单个对象（而非数组）
  const matchedDetail = transformationDetails.find((detail) => detail.id === item.id);
  
  // 提取并存储code，处理可能的空值情况
  if (matchedDetail?.items?.code) {
    setItemCode(matchedDetail.items.code);
  } else {
    setItemCode('');
  }

  setBarcode(transformationDetailID);
  setShowModal(true);
};

步骤3：在renderBarcodeModal中使用存储的code #

将原代码中的{items?.code}替换为状态中的{itemCode}：

const renderBarcodeModal = () => {
  return (
    <div className="modal-header d-flex justify-content-center align-items-center" style={{ backgroundColor: "#3A936C", color: "white" }}>
      Barcode
      {barcode.map((item, index) => {
        return (
          <div className="d-flex justify-content-center align-items-center flex-column" style={{ color: "black", marginBottom: '20px' }}>
            <img src={`https://chart.googleapis.com/chart?cht=qr&chl=${`${item.itemId}-${index}`}&chs=250x250`} id="barcode" alt="Barcode" style={{ width: "100%" }} />
            {workOrderNo}/{itemCode || 'N/A'}/{item.itemId}/({index + 1})
          </div>
        );
      })}
      <div className="btn btn-secondary mt-2" data-dismiss="modal" style={{ backgroundColor: "white", color: "#498B71" }} id="close_modal">
        Close
      </div>
      <div className="btn btn-primary mt-2" style={{ marginLeft: '40px' }} onClick={handleDownloadQR}>
        Download
      </div>
      <div className="d-flex flex-row" style={{ marginLeft: '30px' }}>
        {reactToPrintTrigger()}
      </div>
    </div>
  );
};

补充提示 #

• 如果transformationDetails中可能存在items或code为空的情况，建议在渲染时添加兜底值（比如示例中的'N/A'），避免页面出现空白
• 使用find替代filter是因为我们只需要匹配到的单个详情对象，无需返回数组，减少后续处理成本

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