为什么我的 React 函数被调用两次？

19 浏览
0 Comments

为什么我的 React 函数被调用两次？

我有一个想法，可能是因为我正在对我的单选按钮进行一些样式更改，但我不确定。我设置了一个onClick事件，调用了我的函数两次。我已经将它移除，以确保它不是在其他地方触发的，onClick似乎是罪魁祸首。

我的函数目前只是简单地控制台记录运输选项：

更改运输（shipOption）{

console.log('clicked') // 发生两次

}

如果你看不出来为什么会发生这种情况，我可以发布剩下的代码，但是代码量很大，我不认为它与这个问题有关，但我认为这是一个很好的起点。

完整代码：

0

3 答案

0 Comments

为什么我的函数在React中被调用两次？

问题的出现原因是与HTML相关，而不是与React相关。默认情况下，点击标签也会触发与其关联的输入元素的onClick事件。在你的情况下，onClick事件被同时绑定到了标签和输入元素上。所以通过点击标签，事件被触发了两次：一次是标签，一次是与之关联的输入元素。

编辑：将onClick监听器绑定到输入元素上是解决这个问题的一个可能的方法。

是的，我刚刚看到了这一点，感谢提醒，你可以将onClick放在输入元素上来解决这个问题，我会接受这个答案。

太好了，谢谢！这个解决方案（将下拉菜单移出

0
0 Comments

在React中，函数被调用两次的原因可能是由于事件的冒泡或捕获阶段导致的。为了解决这个问题，可以使用e.preventDefault()来阻止事件的默认行为。

下面是一个例子，演示了如何使用e.preventDefault()来防止函数被调用两次。

changeShipping(e){
   e.preventDefault();
   console.log('clicked');
}

通过在事件处理函数中添加e.preventDefault()，可以防止函数被调用两次。这样，当点击事件发生时，函数将只被调用一次。

上面的解决方法已经被验证过，可以解决函数被调用两次的问题。

希望本文对你有所帮助！

0
0 Comments

为什么我的函数在React中被调用两次？

问题原因：您的app组件被包裹在StrictMode中。

解决方法：完全删除即可解决问题。

在开发中，预期的是在严格模式下setState更新器将运行两次。这有助于确保代码不依赖于它们只运行一次的情况（如果异步渲染被中止然后重新启动，情况将不同）。如果您的setState更新器是纯函数（应该是这样），那么这不会影响应用程序的逻辑。

感谢原作者的回答！没有其他人提到这一点！然后我花了一段时间才弄清楚如何禁用StrictMode（reactjs.org/docs/strict-mode.html），方法不是从那些标签中删除.StrictMode，而是删除整个包装的标签。

当我将改为时，代码会出错。

不，完全删除就可以解决你的问题。

这正是我在寻找的！对我起作用了。谢谢。

非常感谢，这很有帮助，我已经遇到了三天的错误。

如果没有这个答案，我不知道我该如何找到它。非常感谢！

这个评论对我来说也非常有用，谢谢！

R Native是指React Native吗？

我根本没有使用setState()，但删除严格模式后，我的fetch()只运行一次。

0