使用 onClick 的 ReactJS 调用方法不能完全工作答案

【问题标题】：ReactJS Calling method with onClick doesn't work fully使用 onClick 的 ReactJS 调用方法不能完全工作
【发布时间】：2021-01-28 13:20:58
【问题描述】：

所以我正在 ReactJS 中进行排序可视化。
我有一个名为“bubbleSort”的方法，它将按照冒泡排序算法对数组进行排序。
我在屏幕上生成并可视化了一个名为“array”的数组。
现在当我使用

<button onClick={bubbleSort(array)}>Click here to sort</button>

每次页面加载时，它都会对数组进行排序并自动更改可视化数组。这不是我想要的，我希望它对数组进行排序并在我单击按钮时更改可视化。所以我做了另一种这样的方法

function doSort() {
   bubbleSort(array);
   console.log(array);
   }

并像这样调用按钮<button onClick={doSort}>Click here to sort</button>，它将对数组进行排序，但屏幕上的可视化数组保持不变（随机）并且未正确显示（排序）。我被困住了，不知道该怎么办。非常感谢您抽出时间来帮助我。

【问题讨论】：

请您添加您的 console.log 语句的输出
bubbleSort 是做什么的？ array 是什么？
@PaulMichaels console.log 的输出是排序后的数组。例如，我有一个类似 [5, 4, 6, 2, 1] 的数组。 console.log 将是 [1, 2, 4, 5, 6]
@Aron bubbleSort 是一个将数组从随机到最小到最大排序的函数。数组是一个随机数组，如 [5, 4, 6, 2, 1]，在屏幕上显示为彩色条
array 是状态变量吗？道具？ bubbleSort 是使用状态设置器来更新状态还是只是尝试在原地改变数组？

【解决方案1】：

欢迎使用 StackOverflow，我认为您应该使用以下模式调用该函数。

<button onClick={() => bubbleSort(array)}>Click here to sort</button>

【讨论】：

谢谢，我试过了，但没用
如果你这样尝试会怎样<button onClick={() => bubbleSort([2,1,3])}>Click here to sort</button>