javascript - 如何将功能作为 Prop 从一个功能组件传递到另一个功能组件？

Question

我将一个函数作为 Prop 从一个功能组件(仪表板)传递到另一个(事件)。但是，当我单击子组件上的按钮时，该按钮将传递的函数 Prop 保存在 onClick 值上，它会引发错误。
未捕获的类型错误:deleteEvent 不是函数
这是我在仪表板中的 deleteEvent 功能

  const deleteEvent = async (id) => {
    try {
      await Axios.delete(`/event/${id}`);
      const events = data.events.filter((event) => event.id !== id);
      setData({ ...data, events: events });
    } catch (err) {
      console.log(err);
    }
  };

这就是我在仪表板中渲染事件的方式。

{data.events.map((event, idx) => (
        <Event key={`event${idx}`} event={event} delete={() => deleteEvent} />
      ))}

这是我的 Event.jsx

const Event = ({
  event: { id, name, price, duration, schedule },
  delete: { deleteEvent },
}) => {
  console.log(deleteEvent);
  return (
    <div className="event" key={id}>
      <p>Name: {name}</p>
      <p>Price: {price}</p>
      <p>Duration - {duration}</p>
      <p>Schedule</p>
      {Object.keys(schedule).map((day) => (
        <p key={day}>
          {day} -{' '}
          {schedule[day].map((slot, idx) => (
            <span key={idx}>
              {slot.start} - {slot.start}
            </span>
          ))}
        </p>
      ))}
      <button type="button" onClick={() => deleteEvent(id)}>
        Delete Event{' '}
      </button>
    </div>
  );
};

当我单击按钮时，它会抛出 未捕获的类型错误:deleteEvent 不是函数 错误。
我究竟做错了什么 ？我以前使用基于类的组件来完成此操作。

Answer 1

当您传入 delete() 函数时，您正在创建一个返回 delete() 函数句柄的匿名函数，而不是传入函数本身。
你在哪里delete={() => deleteEvent} />您可以将函数本身作为 Prop 传递delete={deleteEvent} />在解构里面Event您只需要在 delete 下访问该函数即可。 key 而不是将其包裹在第二组 curl 中以拉出物体delete: deleteEvent