为什么在使用map() [duplicate]渲染按钮时onClick()会被触发两次
我是前端的新手，我正在尝试实现一个简单的功能：检索城市列表，为每个城市渲染一个按钮，并单独捕获它们的点击动作
我得到的列表如下：
this.state.favCts: ['Sydney', 'melbourne', 'tokyo', 'bankok']
并像这样渲染按钮
<div className="column">
{this.state.favCts.map(
(item, index) =>
<button key={index} onClick = {console.log("show fav city" + item)}>{item}</button>
)}
</div>
但是，这些按钮在呈现时将被单击两次，并且如果我之后单击它们，则不会记录任何内容
共有1个答案
进行以下更改：
-
问题内容： 我将2个值传递给子组件： 要显示的对象列表 删除功能。 我使用.map（）函数显示对象列表（如在React教程页面中给出的示例中所示），但是该组件中的按钮在render上触发该函数（不应在渲染时触发）。我的代码如下所示： 我的问题是：为什么函数在渲染时触发，如何使其不触发？ 问题答案： 因为您是在调用该函数而不是将函数传递给onClick，所以将该行更改为此： 在ES6中引入了一个称为
-
问题内容： 我有一个已创建的组件： 当我打开此页面时，我的中的每个页面都会被调用。如果我喜欢： 我还可以使用匿名函数： 然后它会按预期工作。为什么会这样？ 问题答案： 您需要传递对函数的 引用 ，当您这样做时调用函数并传递给从返回的值。您可以使用以下三个选项之一： 1 。使用 2 。使用箭头功能 3 。或从返回函数
-
本文向大家介绍render在什么时候会被触发？相关面试题，主要包含被问及render在什么时候会被触发？时的应答技巧和注意事项，需要的朋友参考一下 在 React 中，只要执行了 setState 方法，就一定会触发 render 函数执行； 组件的 props 改变了，不一定触发 render 函数的执行，除非 props 的值来自于父组件或者祖先组件的 state
-
我已经初始化了一个数组状态，当我更新它时，我的组件不会重新渲染。以下是一个最低限度的概念证明： 根据这段代码，似乎输入应该包含要开始的数字0，并且无论何时更改，状态也应该更改。在输入中输入“02”后，应用程序组件不会重新渲染。但是，如果我在5秒后执行的onChange函数中添加setTimeout，则表明数字确实已更新。 对为什么组件不更新有什么想法吗？ 这是一个带有概念证明的代码沙盒。
-
也许你们中的一些人可以帮我睁开眼睛。 我不明白为什么在这段代码中：https://codesandbox.io/s/use-state-renders-twice-6r1xl组件应用程序在安装并单击按钮时呈现两次（console.log被调用两次） 代码： 结果： 它只是一个功能组件挂钩！
-
问题内容： window.onload = function(){ 这是我的代码，当我单击“文本”时，它将向您提示两次，但是当我单击该框时，该元素将仅触发一次，为什么？ 问题答案： 当您单击标签时，它会触发单击处理程序，并且您会收到警报。 但是单击标签还会自动将click事件发送到关联的输入元素，因此将其视为对复选框的单击。然后事件冒泡会导致在包含元素（即标签）上触发click事件，因此您的处理程