我是 typescript 和 Redux 的新手。我正在使用 Redux 将属性(状态)注入(inject)组件。当我渲染组件时,我没有传递任何 Prop ,因为它们是由 redux 注入(inject)的,所以它提示缺少 Prop 。
当我将鼠标悬停在 <RelatedFilesTableContainer/>
上时我看到以下错误消息。感谢您的帮助!
Exact Error: (TS) Type '{}' is missing the following properties from type 'IReportStore': showOrphaned, filters, filterFile
import * as React from "react";
import { RouteComponentProps } from "react-router";
import RelatedFilesTableContainer from "@Components/reportView/RelatedFilesTable";
type Props = RouteComponentProps<{}>;
const ReportPage: React.FC<Props> = () => {
return <div>
<RelatedFilesTableContainer />
</div>;
}
export default ReportPage;
正在渲染的组件在下方
import React from "react"
import { Container, Table } from "react-bootstrap";
import CheckBoxContainer from "@Components/reportView/Checkbox"
import ReportTableHeader from "@Components/reportView/ReportTableHeader";
import CollapsibleRow from "@Components/reportView/CollapsibleRow";
import * as reportStore from "@Store/reportStore";
import { withStore } from "@Store/index";
let renderCollapsibleRows = (filterFile: Object) => {
let collapsibleRows = [];
console.log(filterFile.RelatedFiles);
filterFile.RelatedFiles.forEach(relatedFile => collapsibleRows.push(<CollapsibleRow rowData={relatedFile}/>));
return collapsibleRows;
}
type Props = reportStore.IReportStore;
const RelatedFilesTable: React.FC<Props> = ({ filterFile }) => {
return (
<Container>
<div className="d-flex justify-content-between">
<p>{filterFile.FilterFileName}</p>
<CheckBoxContainer />
</div>
<Table striped bordered hover>
<ReportTableHeader />
<tbody>{renderCollapsibleRows(filterFile)}</tbody>
</Table>
</Container>
)
}
// Connect component with Redux store.
var RelatedFilesTableContainer = withStore(
RelatedFilesTable,
state => state.report, // Selects which state properties are merged into the component's props.
reportStore.actionCreators, // Selects which action creators are merged into the component's props.
);
export default RelatedFilesTableContainer
最佳答案
您希望您的 Props
定义还包括由 redux 注入(inject)的 props 的类型(使用 withState
函数)。您可以通过分解单独的 mapStateToProps
和 mapDispatchToProps
函数,并基于此推断 Props
来实现这一点,如下所示:
const mapStateToProps = (state) => state.report;
const mapDispatchToProps = reportStore.actionCreators;
type Props = reportStore.IReportStore &
ReturnType<typeof mapStateToProps> &
typeof mapDispatchToProps;
const RelatedFilesTable: React.FC<Props> = ({filterFile}) => { ... }
var RelatedFilesTableContainer = withStore(
RelatedFilesTable,
mapStateToProps,
mapDispatchToProps,
);
export default RelatedFilesTableContainer;
https://stackoverflow.com/questions/63199139/
相关文章:
python - 使用 pydbgen 模块时出现 TypeError
python - 如何使用python将NPZ文件转换为文本文件
mongodb - 更新嵌套数组的字段时,如何使 mongodb 的 "updated"停止?
node.js - 如何避免使用 discord.js api 超过速率限制?
python - 如何在不返回并更改数据的情况下更改 seaborn fiddle 图的 x 轴标签
python - 无法将从 MongoDB 检索到的 json 值返回到 python flask
ruby-on-rails - ActiveStorage 和 s3 - 默认设置所有公开的图像
python - 当我的播放器类与我的平台类之一发生碰撞时,如何制作和结束屏幕?