reactjs - 使用带有钩子的数组映射

Question

我正在尝试使用 react-barcodes 库，它真的很棒。我遇到的问题是使用钩子（必须在函数顶部声明，无条件等）并且还遍历数组以对条形码使用不同的值。我认为这是一个更普遍的 React 和 hooks 问题，而不是任何特定于 react-barcodes 的问题。[此处][1] 提供的示例效果很好。但是，这就是我想要做的事情：

import { useBarcode } from "react-barcodes";

const BarCodeTest = (props) => {
  var data = [
    {
      barCodeValue: "123",
    },
    { barCodeValue: "456" },
  ];

  // I want to change the "value" property here for each
  const { inputRef } = useBarcode({
    value: "initial value of some kind",
    options: {
      displayValue: true,
      height: 50,
    },
  });

// how can I set the value property as I iterate through data[]?  
return <>{data && data.map((item, index) => <svg ref={inputRef} />)}</>;
};

export default BarCodeTest;


  [1]: https://github.com/Bunlong/react-barcodes#-usage

标签： reactjsreact-hooks

Answer 1

实际上，您可以将其分为两个组件，一个是您当前拥有的组件，另一个是您可以将其称为 BarCodeItem 的组件，您可以遍历数据并将barcodeValue作为道具发送到 BarCodeItem 然后您可以像下面这样轻松处理钩子：您通常会如何处理事情。

import React, { useRef } from "react";
import { useBarcode } from "react-barcodes";


const BarCodeItem = ({barcodeValue}) => {

  const { inputRef } = useBarcode({
    value: barcodeValue,
    options: {
      displayValue: true,
      height: 50,
    },
  });

  return <svg ref={inputRef} />;
};

const BarCodeTest = (props) => {
  var data = [
    {
      barCodeValue: "123",
    },
    { barCodeValue: "456" },
  ];

// how can I set the value property as I iterate through data[]?  
return <>{data && data.map((item, index) => <BarCodeItem key={index} barcodeValue={item.barCodeValue} />)}</>;
};


export default BarCodeTest;