与箭头功能混淆反应答案

【问题标题】：Confusion with arrow functions react与箭头功能混淆反应
【发布时间】：2021-05-09 09:48:51
【问题描述】：

import React, {useState} from "react";

function Todo({todo,index,removeTodo}){
    return(
    <div className="todo"> 
        {todo.text}


        <div>
            <button onClick={() => removeTodo(index)} > Remove </button>

        </div>
    </div>
    );
}

export default Todo;

有人可以解释为什么我需要在调用函数之前放置 () => 吗？

【问题讨论】：

() => { /* function code */ } 是一个匿名函数，类似于写function() { /* function code */} 只是匿名函数会自动绑定到创建它的作用域。这里为什么需要匿名函数是因为@987654324 @ 提供了一个 React.MouseEvent 参数，而不是 removeTodo 期望的索引，因此需要包装 removeTodo 以提供预期的参数。
什么是 React MouseEvent，为什么它会影响我传递给 removeTodo 的内容，索引不总是只是一个数字吗？
React.MouseEvent 是 React 中鼠标相关事件的 Typescript 类型。按钮的onClick 的类型为(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;。它会影响 removeTodo 的调用方式，就好像您要拥有 <button onClick={removeTodo} /> 然后 removeTodo 将收到 React.MouseEvent 而不是索引。如果您有<button onClick={removeTodo(index)} />，则removeTodo 将在渲染期间执行并返回分配给onClick 的函数（我假设它是未定义的）。这样您就可以将 removeTodo 包装在一个匿名函数中。

标签： javascript reactjs onclick arrow-functions

【解决方案1】：

onclick 是一个原生 js 事件监听器，它需要一个函数并在其中传递一个事件对象，如果您的 removeTodo 函数返回一个函数，那么它应该可以工作，但是您的函数应该如下所示：

function removeTodo(index) {

 return () => {}
}

我不认为这是一个案例。

【讨论】：

那么你的意思是，如果我将它作为 removeTodo 传入它是一个对象，而不是一个函数？
像这样onClick={removeTodo} 很好，但是你的index 参数是来自点击事件的事件对象，像这样onClick={removeTodo(index)} 它会抛出一个错误，因为你将 undefined 分配给功能。
事件对象是什么意思，不只是一个数字吗？

【解决方案2】：

看看这个帖子：Correct use of arrow functions in React

应该会有所帮助。请务必参考答案，而不是上面链接中的问题。

【讨论】：