类型错误：未定义不是对象（评估“reminder.map”）

Question

这是我的reminder-list.tsx，我欺骗了它多少次，我总是做不到，如何解决它

我总是遇到 TypeError: undefined is not an object (evaluating 'reminder.map') 错误

import { ReminderDetails } from "@/types/types";
import React from "react";

interface ReminderListProps {
  reminder: ReminderDetails[];
}

const ComponentReminderList: React.FC<ReminderListProps> = ({ reminder }) => {
  return (
    <tbody>
      {reminder.map((item, index) => (
        <tr key={index}>
          <td className="text-[hsl(210,17%,98%)] w-[20%] font-light text-xs px-4 py-4">
            {item.patient}
          </td>
          <td className="text-[hsl(210,17%,98%)] w-[20%] font-light text-xs px-4 py-4">
            {item.medicine}
          </td>
          <td className="text-[hsl(210,17%,98%)] w-[20%] font-light text-xs px-4 py-4">
            {item.dosage} - {item.dosage_unit}
          </td>
          <td className="text-[hsl(210,17%,98%)] w-[20%] font-light text-xs px-4 py-4">
            {item.schedule}
          </td>
          <td className="text-[hsl(210,17%,98%)] w-[20%] font-light text-xs px-4 py-4">
            {item.notes}
          </td>
        </tr>
      ))}
    </tbody>
  );
};

export default ComponentReminderList;

Answer 1

换句话说，该错误表明您无法读取未定义的属性。

reminder

属性在某种程度上是

undefined

并在父组件中作为

undefined

传递。你应该检查你在哪里使用了

ComponentReminderList

组件并检查你传递的 props。

为了获得最佳实践，您应该在组件的顶层检查 props，如下所示：

import { ReminderDetails } from "@/types/types";
import React from "react";

interface ReminderListProps {
  reminder: ReminderDetails[];
}

const ComponentReminderList: React.FC<ReminderListProps> = ({ reminder }) => {
    if (!reminder) return null // or a fallback message

  return (
    <tbody>
      {reminder.map((item, index) => (
        <tr key={index}>
          <td className="text-[hsl(210,17%,98%)] w-[20%] font-light text-xs px-4 py-4">
            {item.patient}
          </td>
          <td className="text-[hsl(210,17%,98%)] w-[20%] font-light text-xs px-4 py-4">
            {item.medicine}
          </td>
          <td className="text-[hsl(210,17%,98%)] w-[20%] font-light text-xs px-4 py-4">
            {item.dosage} - {item.dosage_unit}
          </td>
          <td className="text-[hsl(210,17%,98%)] w-[20%] font-light text-xs px-4 py-4">
            {item.schedule}
          </td>
          <td className="text-[hsl(210,17%,98%)] w-[20%] font-light text-xs px-4 py-4">
            {item.notes}
          </td>
        </tr>
      ))}
    </tbody>
  );
};

export default ComponentReminderList;