Javascript 为什么React在没有点击的情况下调用onClick函数？

在下面的代码中，有一个带有提交按钮的输入表单。有一个map函数，它应该显示

items

中的项目（这是一个状态数组）。我想在显示的每个项目上都附加一个按钮，当单击该按钮时，它将删除状态数组中的该项目

function App() {
  let [name, setName] = useState('')
  let [items, setItems] = useState([{id:1, name:"aaryan"}, {id:2, name:"dewan"}])

  const deleteItem = (id) => {
    //code to delete the element
    console.log("Hi World")
  }

  return(
    <div>
      <form>
    <label>
      Name:
      <input type="text" name="name" onChang  e={(e) => setName(e.target.value)}/>
      <button type='submit'>Submit</button>
  </label>
  </form>
    {
      items.map((item) => {
        return(
          <div key={item.id}>
          <h2>{item.name}</h2>
          <button onClick={deleteItem(item.id)}>Delete</button>
          </div>
        )
      })
    }
  </div>
  )
}

函数应用程序（）{
let[name，setName]=useState（“”）
let[items，setItems]=useState（[{id:1，名称：“aaryan”}，{id:2，名称：“dewan”}]）
常量deleteItem=（id）=>{
//删除元素的代码
console.log（“Hi-World”）
}
返回(
姓名：
setName（e.target.value）}/>
提交
{
items.map（（item）=>{
返回(
{item.name}
删除
)
})
}
)
}

问题：当我在输入框中键入任何内容而不单击“删除”按钮时，

deleteItem（）

被调用4次并显示“Hi World”！为什么会这样？我该如何修复它

我想要的-

deleteItem（）

只应在我按下删除按钮时调用

替换

<button onClick={deleteItem(item.id)}>Delete</button>

删除

与

deleteItem（item.id）}>Delete

在第一种方法中，您直接调用

render（）

上的函数，因此每当页面呈现时，您也调用

deleteItem

函数。

Replace

<button onClick={deleteItem(item.id)}>Delete</button>

删除

与

deleteItem（item.id）}>Delete

---

在第一种方法中，您直接调用

render（）

上的函数，因此每当页面呈现时，您也调用

deleteItem

函数。

这是一个容易犯的错误，因为React-onClick看起来像是添加到html元素中的onClick属性，如本例中所示：Click Me。但这不一样。请参阅：这是一个容易犯的错误，因为React-onClick看起来像是添加到html元素中的onClick属性，如本例中所示：Click Me。但这不一样。见：