如何将函数作为道具从一个功能组件传递到另一个？

Question

我将一个函数作为道具从一个功能组件（仪表板）传递到另一个（事件）。但是，当我单击子组件上的按钮时，该按钮将传递的函数道具保存在 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>
  );
};

当我单击按钮时，它抛出Uncaught TypeError: deleteEvent is not a function error。

我究竟做错了什么 ？ 我以前使用基于类的组件完成了这项工作。

Answer 1

当您传入 delete() 函数时，您正在创建一个匿名函数，该函数返回 delete() 函数句柄，而不是传入函数本身。

你有的地方

delete={() => deleteEvent} />

您可以将函数本身作为道具传递

delete={deleteEvent} />

在Event代码中的解构中，您只需要在delete键下访问该函数，而不是将其包装在第二组 curleys 中以拉出一个对象

delete: deleteEvent