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

Question

在下面的代码中，有一个带有提交按钮的输入表单。有一个 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>
  )
}

问题：当我在输入框中键入任何内容而没有单击删除按钮时，deleteItem()被调用了 4 次并显示 'Hi World'！为什么会这样？我该如何解决？

我想要的 - deleteItem() 应该只在我按下删除按钮时被调用

Answer 1

替换

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

与

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

使用第一种方法，您直接调用 render() 上的函数，因此每当页面呈现时，您也在调用 deleteItem 函数。

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

Why is React calling an onClick function without being clicked on?

javascript

forms

onclick

reactjs