已解决：axios 在循环中重复一个请求，但我不想要这个 | axios [重复]

Posted 2023-02-22

【中文标题】已解决：axios 在循环中重复一个请求，但我不想要这个 | axios [重复]

【英文标题】：RESOLVED : axios repeat in a loop a request but I don't want this | axios [duplicate]

【发布时间】：2021-10-12 11:39:59

【问题描述】：

我在 react 中编写了一个页面，它与我的 express 与一个小的 API 代码交互，我创建了一个按钮，当我点击它时，它会删除一条消息，但是当我不点击时，该功能仍在执行......我的代码：

delete(id)
    for (let i = 0; i<1; i++) 
        axios.delete(`http://localhost:8080/messages/$id`)
            .then(res => 
                console.log(res);
                console.log(res.data);
            )
    


render() 
    return (
        <div>
            <ul>
                <button type="submit" onClick=this.delete(messageId)>suprimmer</button></li>
            </ul>
        </div>
    )

【问题讨论】：

你可以使用onClick=() => this.delete(messageId)，否则当你的JSX最初从render()返回时，你的函数将会运行。如果您只进行 1 次迭代，您也不需要在 delete() 方法中使用 for 循环。

【参考方案1】：

这行得通吗：

<button type="submit" onClick=() => this.delete(messageId)>suprimmer</button>

当您像在您的版本中那样执行此操作时，您实际上是在调用该函数。

【讨论】：

好的，非常感谢它的作品

【参考方案2】：

onClick 接收 value 作为其function 以在用户“点击”它时触发/调用/运行。但是在您的代码中，您在编译阶段触发/调用/运行函数this.delete()（编译器读取Button onClick=this.delete(id)>Delete Button</button>并立即调用this.delete(id)并将其结果用作onClick的值（删除函数不返回任何含义return undefined，所以最终结果是`)。

所以结果是：

每次加载组件时，它都会立即调用删除。而onClick 的值现在是undefined，这使得onClick 无法按预期工作。

更多细节我将在下面给出一个例子：

const DeleteButton =(id)=> 
  const delete = (id)=> 
      return api.deleteItem(id)
  

  return <Button onClick=delete(id)>Delete Button</button>

所以，当我使用上面的组件时：

<Container>
  <Content value=item/>
  <DeleteButton id=item.id/>
</Container>

它会自动删除你加载的项目，因为在渲染DeleteButton时它已经调用了delete(id)。

那么，如何解决呢？ - 它有很多解决方案，但最终它必须给出onClick的值类型是a function：

#1 我敢打赌没有人用这个，但我认为描述我的想法更有用。

const DeleteButton =(id)=> 
  const delete = (id)=> 
      return function() 
       api.deleteItem(id)
      
  

  //delete(id) called and it returns an anonymous function that receive `id` and called it when onClick trigger
  return <Button onClick=delete(id)>Delete Button</button>

#2

const DeleteButton =(id)=> 
  const delete = (id)=> 
     return  api.deleteItem(id)
  

  return <Button onClick=(id)=>delete(item.id)>Delete Button</button>
//or use bind : bind is return a function that wrapped parameter into
  return <Button onClick=delete.bind(id)>Delete Button</button>