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

Question

我在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>
    )
}

}

Answer 1

onClick接收值作为其函数，当用户“单击”它时触发/调用/运行。但是在您的代码中，您触发/调用/运行函数。delete（）在编译阶段（编译器读取按钮onClick={this.delete（id）}

因此，结果是：

• 每次加载组件时，它都会立即调用delete。现在，onClick值是未定义的，这使得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）。

那么，如何修复它呢有很多解决方案，但最终它必须给出onClickisa函数的值类型：

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

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> 

}

Answer 2

这是否工作：

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

当你像在你的版本中那样做的时候，你实际上是在调用这个函数。