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

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 错误。

我做错了什么？我以前使用基于 class 的组件完成过此操作。

Answer 1

当您传入 delete() 函数时，您正在创建一个匿名函数，该函数由 returns delete() 函数处理，而不是传入函数本身。

你在哪里

delete={() => deleteEvent} />

你可以将函数本身作为 prop 传递

delete={deleteEvent} />

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

delete: deleteEvent

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

How to pass function as props from one functional component to another?

javascript

reactjs

react-functional-component