javascript - React 行为触发渲染上的所有按钮

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>

使 map 停止调用渲染函数。