Question

我正在将一个作为道具的功能从一个功能组件（仪表板）传递到另一个（事件）。但是，当我单击子组件上的按钮时，该组件将传递的功能道具保留在onClick值上，它将抛出错误。

未捕获的TypeError：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>
  );
};

当我单击按钮时，它会显示未捕获的TypeError：deleteEvent不是函数错误。

我在做什么错？我以前使用基于类的组件来完成此操作。

Answer 1

在传递delete（）函数时，您正在创建一个匿名函数，该函数返回delete（）函数句柄，而不是传递函数本身。

您在哪里

delete={() => deleteEvent} />

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

delete={deleteEvent} />

在Event代码内部进行的结构分解中，您只需要在delete键下访问该函数即可，而不必将其包装在第二组Curley中以拉出对象

delete: deleteEvent

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

1 个答案: