如何将函数作为 props 从一个函数式组件传递到另一个函数式组件？

Question

我正在将一个函数作为prop从一个函数组件(Dashboard)传递到另一个(Event)。然而，当我在子组件上点击按钮，并且将传递的函数prop放在onClick值上时，它会抛出一个错误。

未捕获的类型错误：deleteEvent不是一个函数

这是我的Dashboard中的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不是一个函数”的错误。我做错什么了吗？我之前使用基于类的组件完成过这个操作。

- anotherChowdhury

---

我认为您应该对其进行析构，只需将其更名为 delete: deleteEvent 即可。 - Matt Aft

非常感谢！是的，它解决了问题。 - anotherChowdhury

@MattAft 我应该删除这个问题吗？ - anotherChowdhury

Answer 1

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

当您写出以下代码：

delete={() => deleteEvent} /> 您可以只传递函数本身作为属性：

delete={deleteEvent} /> 在解构Event代码中，您只需要在delete键下访问函数，而不是将其包装在第二组花括号中以提取对象。

delete: deleteEvent

- davidgamero