仅在按下按钮时记录（重新渲染问题）

Question

考虑以下代码：

import React from 'react'
import './App.css';


const App = () => {
  let [count , setCount] = React.useState(0)
  let [approval , setApproval] = React.useState(false)
  let [text , setText] = React.useState('')


  
  const bogusCheck = (text) =>{
    let textArray = text.split(' ')
    console.log(textArray);
  }

  return (
    <div className="App">
      <p>Enter a sentence below and click the button below:</p>
      <textarea cols="30" rows='10' value={text} onChange={e => setText(e.target.value) } />
      <br />
      <button onClick={bogusCheck(text)} >Profanity Check</button>
    </div>

  );
}
export default App;

我想要做的是，当用户输入一个完整的句子并按下按钮时，会发生以下情况：

1. 整个句子作为参数传递给 bogusCheck() 函数。
2. 使用 array.split(' ') 函数将句子转换为数组。
3. 最后整个阵列被控制台记录。

问题是每次我写一封信时，即使没有按下按钮，它也会被记录在控制台中。如果数组在更多情况下使用，例如我将它用于循环和条件，我会收到重新渲染错误。

我该如何解决这个问题？？

很有义务。

Answer 1

问题在于 onClick 处理程序在每次渲染中都被评估，该 prop 应该接收一个函数并且它正在获取一个值，只需像这样更改该行：

<button onClick={() => bogusCheck(text)} >Profanity Check</button>