为何无法传递savedDocuments属性至SavedDocument组件？TypeScript类型报错

报错原因 #

你给SavedDocument组件传入了savedDocuments属性，但子组件的props类型未定义该属性，且错误地将组件参数拆分为两个——第二个参数是React上下文对象，并非组件props的一部分，这直接导致TypeScript类型不匹配。

修复步骤 #

1. 修正子组件的props定义与逻辑

将savedDocuments和删除回调函数加入子组件的props类型，同时统一使用单个props参数，并添加删除点击事件：

type SavedDocumentProps = {
  document: DocumentUploaderFile;
  savedDocuments: DocumentUploaderFile[];
  onDelete: (id: string) => void;
};

const SavedDocument = ({ document, onDelete }: SavedDocumentProps) => {
  const handleDelete = () => {
    onDelete(document.id);
  };

  return (
    <SavedDocumentWrapper>
      <StepCompleteIconSmall />
      <SavedDocumentName>{document.name}</SavedDocumentName>
      <DeleteIconSmall onClick={handleDelete} />
    </SavedDocumentWrapper>
  );
};

2. 调整父组件，维护状态并传递回调

父组件需通过状态管理savedDocuments，并传递删除回调以实现UI更新：

import { useState } from 'react';

const AdditionalDocumentationList = ({ initialSavedDocuments }: { initialSavedDocuments: DocumentUploaderFile[] }) => {
  const [savedDocuments, setSavedDocuments] = useState<DocumentUploaderFile[]>(initialSavedDocuments);

  const handleDelete = (id: string) => {
    setSavedDocuments(prevDocs => prevDocs.filter(doc => doc.id !== id));
  };

  const renderDocuments = () => {
    return savedDocuments.map((document) => (
      <SavedDocument 
        key={document.id}
        document={document} 
        savedDocuments={savedDocuments} 
        onDelete={handleDelete} 
      />
    ));
  };

  return <AdditionalDocumentationWrapper>{renderDocuments()}</AdditionalDocumentationWrapper>;
};

关键说明 #

• React组件的props仅通过第一个参数传入，第二个参数为上下文对象，不可用于传递自定义属性。
• 遵循React单向数据流原则，子组件不可直接修改父组件数据，需通过回调通知父组件更新状态。
• 列表渲染必须添加key属性，避免React渲染异常。

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