如何根据 "quantity" 变量重复函数多次

Question

我正在构建一个 DApp，但用户输入元数据和图像来铸造 NFT。

一切正常，但我想添加一个数量函数，该函数实际生成他们输入的 NFT 的数量，最小值为 1，最大值为 100。

现在我有数量作为状态变量

    const [quantity, setQuantity]= useState("");

我有一个按钮，当按下它时会连接到一个函数 {onMintPressed}

     <button onClick={ onMintPressed }> Mint NFT </button>

现在数量只是这个代码的输入

                     <label className={classes.customLabel}>Quantity </label>
              <input
                className={classes.customInput}
                type="number"
                min={1}
                max={100}
                placeholder="1-100"
                onChange={(event) => setQuantity(event.target.value)}

我是新手，但理想情况下，在一个完美的简单编码世界中，函数看起来像这样

    <button onClick={onMintPressed * x(quantity)}> Mint NFT </button>

我知道这是行不通的，它本身不是一个函数，但这只是解释我正在尝试做的事情的最简单方法

感谢任何帮助，谢谢！

Answer 1

为 onClick 处理程序创建一个匿名函数 () => {...}。并在其中调用您的函数 onMintPressed(quantity)。

<button onClick={()=>{onMintPressed(quantity)}}> Mint NFT </button>

此外，您的 quantity 状态变量是一个字符串，因此在将其用于数量时请考虑到这一点。

更新您还可以使 onMintPressed 方法成为点击处理程序。它将事件作为参数传递，但您可以忽略它。然后在该函数内，只需抓住 quantity 因为它是一个状态变量。

<button onClick={onMintPressed}> Mint NFT </button>

const onMintPressed = (event) => {
  const quantityAsNumber = +quantity
  console.log('quantity is', quantityAsNumber)
}

更新 2 我不确定你想做什么，但你可以调用一些 'minting' 函数 quantity 次，只需将它放在 for() 循环中即可。我还添加了 async/await 关键字，因此每个 'mintSomething()' 调用都将阻塞，直到它们完成。这是非常基本的，所以我可能误解了你想做什么。

const onMintPressed = async (event) => {
  const quantityAsNumber = +quantity
  for (let i=0; i < quantity; ++i) {
    await mintSomething()
  }
}

Post 回答接受更新 哎呀。我在上面写道 mintSomething() 调用可以并行工作，但事实并非如此。每个都会阻塞直到完成。要并行铸造东西，您只需坚持每个 mintSomething 请求 returns 的承诺，然后等待所有这些。

const onMintPressed = async (event) => {
  const quantityAsNumber = +quantity
  const promises = []
  for (let i=0; i < quantity; ++i) {
    promises.push(mintSomething())
  }
  await Promise.all(promises)
}

如何根据 "quantity" 变量重复函数多次

How to repeat a function a number of times based off "quantity" variable

javascript

arrays

reactjs

decentralized-applications