反应行为在渲染时触发所有按钮

Question

我正在通过map()生成一个人员列表和“删除按钮”，并在React组件中呈现(通过props传递映射列表并在<p>标记中呈现)。

当react第一次渲染时，它会触发所有按钮onClick()，并且按钮停止工作。

为什么会发生这种行为？

  const deletePerson = (id) => {
    console.log(`deleting id: ${id}`)
  }

  const mappedPersons = persons.map(person => 
    <li key={person.name}>
      {`${person.name} - `}
      {`${person.phone} `}
      <button onClick={deletePerson(`${person.id}`)} value={person.id}>
        delete person
      </button>
    </li>
)

控制台：

deleting id: 1
deleting id: 2
deleting id: 3
deleting id: 4
deleting id: 5
deleting id: 6
deleting id: 7
deleting id: 8

Answer 1

下面的答案就是：React onClick function fires on render

将按钮onClick更改为：

<button onClick={() => deletePerson(`${person.id}`)} value={person.id}>
        delete person
      </button>

使贴图在渲染时停止调用函数。