TypeScript中向组件传递数组属性的类型错误修复

错误原因 #

你给Toast组件定义的props类型是ToastProps[]（数组），但React组件接收的props本质是对象，你传递的<Toast toastlist={list} />是一个包含toastlist属性的对象，两者类型不匹配，导致类型报错。

修复步骤 #

1. 为Toast组件定义正确的props接口，明确接收一个包含toastlist属性的对象
2. 调整组件内部对props的使用逻辑

修改后的完整代码 #

// 原有的ToastProps保持不变
export interface ToastProps {
  id: number;
  title: string;
  description: string;
  backgroundColor: string;
}

// 新增组件专属的props接口
interface ToastComponentProps {
  toastlist: ToastProps[];
}

// 组件使用新的props接口
export default function Toast(props: ToastComponentProps) {
  return (
    <div>
      {/* 改为遍历props.toastlist */}
      {props.toastlist.map((toast) => (
        {/* 建议用toast.id作为key，而非索引i，避免列表更新时的渲染问题 */}
        <div key={toast.id} style={{ backgroundColor: toast.backgroundColor }}>
          <button>X</button>
          <div>
            <p>{toast.title}</p>
            <p>{toast.description}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

额外优化提示 #

• 遍历列表时，优先使用数据的唯一标识（比如toast.id）作为key，而非数组索引，这能避免列表项顺序变化时的不必要重渲染。
• 如果组件只需要接收这一个属性，也可以用解构赋值简化代码：

export default function Toast({ toastlist }: ToastComponentProps) {
  return (
    <div>
      {toastlist.map((toast) => (
        <div key={toast.id} style={{ backgroundColor: toast.backgroundColor }}>
          {/* ... 内容不变 */}
        </div>
      ))}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者AfonsoSalgadoSousa