时间戳

首页 > 解决方案 > 多次执行handleClick

reactjs - 多次执行handleClick

问题描述

我有一个按钮，当它被点击时它会发出一个 POST 请求。在等待响应时，我有一个加载动画。但是现在我希望这个按钮不只发出 1 个帖子请求我希望它通过 1 次点击发出 100 个帖子请求

我的按钮

          <Form>
              <Form.Group>
                <Button variant='success' className='button' onClick={handleClick} id='create'>Create Sales Order</Button>
              </Form.Group>
         </Form>

等待 API 调用时的加载程序

            <BeatLoader
              css={override}
              size={30}
              // size={"150px"} this also works
              color='#b51a82'
              loading={isLoading}
            />

这是按下按钮时调用的 handleClick 函数

 async function handleClick (event) {
  switch (event.target.id) {
    case 'create':
      setLoading(true)
      break

    case 'delete':
      // code for delete case
      break

    default:
      console.log('click didnt work')
  }
}

我的 useEffect 挂钩。在这个钩子中，我尝试将 createSalesOrder 函数的内容放在一个循环中，这不起作用，因为它会破坏我的加载动画（加载动画不会停止）

useEffect(() => {

  async function createSalesOrder () {
    const res = await axios.post('http://localhost:5000/')
    console.log(res)
    setValue([...value, res.data])
    return (res)
  }

  if (isLoading) {
    createSalesOrder().then(() => {
      setLoading(false)
    })
  }
}, [isLoading])

标签： reactjspromise

解决方案

您可以使用Promise.all等待一个或多个承诺完成。它返回一个单一的 Promise，它“包装”了所有其他 Promise，当所有 Promise 都已解决时，该 Promise 将解决，或者如果任何一个 Promise 被拒绝，则立即拒绝。

如果你想等待所有的承诺完成，即使有些被拒绝，然后使用Promise.allSettled

useEffect(() => {

  async function createSalesOrder () {
    const res = await axios.post('http://localhost:5000/')
    console.log(res)
    setValue([...value, res.data])
    return (res)
  }

  if (isLoading) {
    const finished = _ => setLoading(false);

    // Wait for all of the sales orders to finish
    Promise.all(
      // Create an array of 100 promises:

      // Quickly create an array with 100 entries
      [...Array(100).keys()].map(

        // For each entry, submit a request to create a sales order
        // and return a promise
        createSalesOrder
      )
    ).then(
      // When all of the promises have resolved, end your animation:
      finished,
      // Make sure you stop the animation even if an error occurred:
      finished
    );
  }
}, [isLoading])

另外，请记住，promise 将按照它们从服务器返回的任何顺序被解析/拒绝，不一定按照它们被发送的顺序。这意味着您创建的第一个订单完全有可能在中间某处被解析，您创建的最后一个订单将首先被解析等等，并且如果您重复逻辑，它们被解析的顺序每次都会不同。

推荐阅读