ReactJs - 为什么在没有箭头函数的情况下使用括号调用 Delete() 不起作用？答案

【问题标题】：ReactJs - Why does calling onDelete() with parantheses without an arrow function not work?ReactJs - 为什么在没有箭头函数的情况下使用括号调用 Delete() 不起作用？
【发布时间】：2022-01-06 22:26:23
【问题描述】：

目前正在学习 React，我很困惑为什么会这样。我的 App.JS：

import logo from './logo.svg';
import './App.css';
import Header from './components/Header'
import Tasks from './components/Tasks'
import {useState} from 'react'


function App() {
  let name = "Max";
  const [tasks, setTasks] = useState([
    {
        id: 1,
        text: 'Doctors Appointment',
        day: "Feb 5th at 2:30 pm",
        reminder: true,
    },
    {
        id: 2,
        text: "Meeting at School",
        day: "Feb 6th at 1:30pm",
        reminder: true,
    },
    {
        id: 3,
        text: "Food Shopping",
        day: "Feb 5th at 2:30pm",
        reminder: false,
    },
  ])
  const deleteTask = (id) => {
    alert("deleted " + id);
  }
  return (
    <div className="container">
      <Header />
      <Tasks tasks={tasks} onDelete = {deleteTask} />
    </div>
  );
}

export default App;

Tasks.JS 基本上只是将 Task.js 显示为 h3s Task.js：

import {FaTimes} from 'react-icons/fa'

const Task = ({ task, onDelete }) => {
    return (
        <div className = "task">
            <h3>{task.text} <FaTimes style = {{color:'red', cursor:"pointer"}} onClick = {() => onDelete(task.id)}/></h3>
            <p>{task.day}</p>

        </div>
    )
}

export default Task

所以我看到了onClick = () => onDelete(task.id) 的箭头函数，想知道为什么我不能只做onClick = onDelete(task.id) 所以我尝试了它并得到了一些意想不到的行为。基本上，在创建页面时，我收到每个项目已被删除三次的警报，然后当我单击它时什么也没发生。为什么会这样？比如我该如何解释这种行为？为什么需要这个箭头函数？

【问题讨论】：

标签： javascript reactjs web

【解决方案1】：

如果您只使用onClick = onDelete(task.id)，它将在该组件的每个渲染上调用onDelete。您将该函数的返回值传递给onClick。通过使用箭头函数，您将传递函数本身，这样当用户点击您的h3 时，它才会调用该函数。

注意 - 出于可访问性原因，将 onClicks 放在像 h3s 这样的元素上并不是一个好主意。

【讨论】：

那么，箭头函数也只是一个函数吧？那么当将它传递给 onClick 时，它的返回值是正确的吗？所以这意味着它调用 onDelete 对吗？我想我的问题是，为什么箭头函数的工作方式与这里的非箭头函数不同？我不完全明白。就像您传递函数本身一样，但该函数只是对另一个函数的调用，对吗？
正确。箭头函数只是用另一个函数包装你的onDelete，因此它可以按需调用而不是内联调用。