Javascript 使用React中的TypeScript访问Redux道具

一直在努力连接组件中的Redux访问道具。发生这种情况是因为我将类组件更改为函数组件，所以我确定这是一个语法错误：

imports...


interface IVideoDetailHeroInstructorProp extends StateProps, DispatchProps {
    multipart: IMultipart;
  }

export const InstructorProfilePicture  = ({multipart}: IVideoDetailHeroInstructorProp ) => {

    useEffect(() => {
        if (multipart.videoHolder.instructorId) {
            const instructorQuery: IQuery = { 'styleId.equals': ['2'], 'instructorId.equals': ['' + multipart.videoHolder.instructorId], 'sort': ['publishedAt,desc'], 'publishedAt.specified': ['true'], 'publicationStatus.equals': [MultipartPublicationStatus.Published] };
            getSearchEntities({ query: instructorQuery, outputKey: 'Instructor:' + multipart.videoHolder.instructorId });
        }
    })

    // const { instructorList } = props; this was working on class component

    return (
        <>
        {instructorList && instructorList.length > 0 && (
          <div>
            {instructorList[0].image1 && (<img className="profile-img" src={`${process.env.CDN_S3_DOMAIN}${instructorList[0].image1}`}/>)}
          </div>
        )}
      </>
    )
};

const mapStateToProps = ({ multipart, authentication }: IRootState, ownProps) => ({
    instructorList: multipart['Instructor:' + ownProps.multipart.videoHolder.instructorId] as ReadonlyArray<IMultipart>,
    authorization: authentication.authorization
  });
  
  const mapDispatchToProps = { getSearchEntities, setSearchFilters };
  
  type StateProps = ReturnType<typeof mapStateToProps>;
  type DispatchProps = typeof mapDispatchToProps;
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(InstructorProfilePicture);

导入。。。
接口IVideDetailHeroInstructorProp扩展StateProps、DispatchProps{
多部分：多部分；
}
导出构造函数InstructorProfilePicture=（{multipart}:IVideDetailHeroInstructorProp）=>{
useffect（（）=>{
if（多部分videoHolder.instructorId）{
const instructorQuery:IQuery={'styleId.equals'：['2']，'instructorId.equals'：['+multipart.videoHolder.instructorId]，'sort'：['publishedAt，desc']，'publishedAt.specified'：['true']，'publicationStatus.equals'：[MultipartPublicationStatus.Published]；
getSearchEntities（{query:instructorQuery，outputKey:'讲师：'+multipart.videoHolder.instructorId}）；
}
})
//const{instructorList}=props；这是在类组件上工作
返回(
{instructorList&&instructorList.length>0&&(
{instructorList[0]。图像1&&（）}
)}
)
};
const-mapStateToProps=（{multipart，authentication}:IRootState，ownProps）=>({
讲师列表：多部分['讲师：'+ownProps.multipart.videoHolder.instructorId]作为只读数组，
授权：authentication.authentication
});
const mapDispatchToProps={getSearchEntities，setSearchFilters}；
类型StateProps=ReturnType；
类型DispatchProps=地图DispatchToProps的类型；
导出默认连接(
MapStateTops，
mapDispatchToProps
)（讲师照片）；

在组件的实现中：

<InstructorProfilePicture  multipart={multipart}/>

我收到这个消息（这些道具来自Redux）：

类型“{multipart:IMultipart；}”缺少以下属性 来自类型“IVideoDetailHeroInstructorProp”：讲师列表， 授权、getSearchEntities、SetSearchFilter

---

谢谢大家!

这应该适合您：

interface IVideoDetailHeroInstructorProp {
    multipart: IMultipart;
    instructorList: WhatEVER,
    authorization: WhatEVER,
getSearchEntities: the action,
 setSearchFilters: the other action
  }

export const InstructorProfilePicture  = ({multipart}: IVideoDetailHeroInstructorProp ) => {

    useEffect(() => {
        if (multipart.videoHolder.instructorId) {
            const instructorQuery: IQuery = { 'styleId.equals': ['2'], 'instructorId.equals': ['' + multipart.videoHolder.instructorId], 'sort': ['publishedAt,desc'], 'publishedAt.specified': ['true'], 'publicationStatus.equals': [MultipartPublicationStatus.Published] };
            getSearchEntities({ query: instructorQuery, outputKey: 'Instructor:' + multipart.videoHolder.instructorId });
        }
    })

    // const { instructorList } = props; this was working on class component

    return (
        <>
        {instructorList && instructorList.length > 0 && (
          <div>
            {instructorList[0].image1 && (<img className="profile-img" src={`${process.env.CDN_S3_DOMAIN}${instructorList[0].image1}`}/>)}
          </div>
        )}
      </>
    )
};

const mapStateToProps = ({ multipart, authentication }: IRootState, ownProps: Partial<IVideoDetailHeroInstructorProp>) => ({
    instructorList: multipart['Instructor:' + ownProps.multipart.videoHolder.instructorId],
    authorization: authentication.authorization
  });
  
  const mapDispatchToProps = { getSearchEntities, setSearchFilters };
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(InstructorProfilePicture);

接口IVideoDetailHeroInstructorProp{
多部分：多部分；
讲师：不管怎样，
授权：不管怎样，
getSearchEntities：操作，
setSearchFilters：另一个操作
}
导出构造函数InstructorProfilePicture=（{multipart}:IVideDetailHeroInstructorProp）=>{
useffect（（）=>{
if（多部分videoHolder.instructorId）{
const instructorQuery:IQuery={'styleId.equals'：['2']，'instructorId.equals'：['+multipart.videoHolder.instructorId]，'sort'：['publishedAt，desc']，'publishedAt.specified'：['true']，'publicationStatus.equals'：[MultipartPublicationStatus.Published]；
getSearchEntities（{query:instructorQuery，outputKey:'讲师：'+multipart.videoHolder.instructorId}）；
}
})
//const{instructorList}=props；这是在类组件上工作
返回(
{instructorList&&instructorList.length>0&&(
{instructorList[0]。图像1&&（）}
)}
)
};
const-mapStateToProps=（{multipart，authentication}:IRootState，ownProps:Partial）=>({
讲师列表：多部分['讲师：'+ownProps.multipart.videoHolder.instructorId]，
授权：authentication.authentication
});
const mapDispatchToProps={getSearchEntities，setSearchFilters}；
导出默认连接(
MapStateTops，
mapDispatchToProps
)（讲师照片）；

您可以将应该传递给基础组件的内容定义为

ivideodeDetailHeroInstructorProp

。这里有多部分、讲师列表、授权、getSearchEntities、SetSearchFilter

您可以将ownProps映射为IVideDetailHeroInstructorProp的任何内容，以便将InstructorProfilePicture所需的任何内容作为props传递给它

这保证了InstructorProfilePicture知道什么将作为道具出现，如果需要的话，connect将用redux道具填满它。这还允许您在需要时使用图片而无需重复，例如用于测试