将类组件转换为带有typescript接口的函数式组件

Question

我有以下基于类的组件。我必须把它转换成一个功能组件

import React from 'react'
import { API } from '../../api'
import { JobPosting } from '../../types'
import { JobPostings } from './JobPostings'
interface State {
jobPostings: JobPosting[]
loading: boolean
}
export class JobPostingsPage extends React.Component<{}, State> {
state = {
jobPostings: [],
loading: true,
}
componentDidMount() {
API.jobPostings.loadAll().then(({ data }) => {
this.setState({
jobPostings: data,
loading: false,
})
})
}
render() {
if (this.state.loading) {
return null
}
return (
<div>
<h1>Job Postings</h1>
<JobPostings jobPostings={this.state.jobPostings} />
</div>
)
}
}

现在，我想把上面的基于类的转换为功能组件。所以我使用了useState和useEffect并将其转换为基于函数的

import React, { useState, useEffect } from 'react'
import { API } from '../../api'
import { jobPostings } from '../../api/jobPostings'
import { JobPosting } from '../../types'
import { JobPostings } from './JobPostings'
interface State {
jobPostings: JobPosting[]
loading: boolean
}
export const JobPostingsPage: React.FC<State> = ({} ) => {
const [jobPostings, setJobPostings] = useState<JobPosting[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
API.jobPostings.loadAll().then(({ data }) => {
setJobPostings(data);
setLoading(false)
})
})
return(
loading ? null: (
<div>
<h1>Job Postings</h1>
<JobPostings jobPostings={jobPostings} />
</div>
)
)}

我面临的问题是，当我执行npm start时，它会给出一个错误。它说Type '{}' is missing the following properties from type 'State': jobPostings, loading TS2739

这指向路由器文件 中的以下代码

const routes = {
home: '/',
}
export const Router: React.FC = () => (
<BrowserRouter>
<Switch>
<Route exact path={routes.home}>
<JobPostingsPage /> -------------------> ERROR ON THIS LINE <------------
</Route>
</Switch>
</BrowserRouter>
)

知道我在转换中哪里出错了吗?如有任何意见，我们将不胜感激。

Answer 1

问题在这一行:

export const JobPostingsPage: React.FC<State> = ({} ) => {

这里应该是定义的props而不是状态。从类组件，我采取的道具是空的，所以你应该把它换成这个，并很好:

export const JobPostingsPage: React.FC<{}> = ({} ) => {

Answer 2

import React from "react";
import BootstrapTable from "react-bootstrap-table-next";
import filterFactory, {
textFilter,
customFilter
} from "react-bootstrap-table2-filter";
class PriceFilter extends React.Component {
constructor(props) {
super(props);
this.filter = this.filter.bind(this);
this.getValue = this.getValue.bind(this);
}
getValue() {
return {
min: this.min.value,
max: this.max.value
};
}
filter() {
this.props.onFilter(this.getValue());
}
render() {
return [
<input
key="min"
ref={(node) => (this.min = node)}
type="date"
placeholder="Min price"
/>,
<input
key="max"
ref={(node) => (this.max = node)}
type="date"
placeholder="max price"
/>,
<button key="submit" className="btn btn-warning" onClick={this.filter}>
{`Filter ${this.props.column.text}`}
</button>
];
}
}
const filterDate = (filterVals, data) => {
console.log(filterVals);
console.log(data);
let min = new Date(
parseInt(filterVals.min.substring(0, 4), 10),
parseInt(filterVals.min.substring(5, 7), 10) - 1,
parseInt(filterVals.min.substring(8, 10), 10)
);
let max = new Date(
parseInt(filterVals.max.substring(0, 4), 10),
parseInt(filterVals.max.substring(5, 7), 10) - 1,
parseInt(filterVals.max.substring(8, 10), 10)
);
const filteredData = data.filter(
// here this is not books but this is undefined here
(row) => {
let datejs = new Date(
parseInt(row.date.substring(0, 4), 10),
parseInt(row.date.substring(5, 7), 10) - 1,
parseInt(row.date.substring(8, 10), 10)
);
console.log(datejs);
console.log(min);
console.log(
((min && datejs >= min) || !filterVals.min) &&
((max && datejs <= max) || !filterVals.max)
);
return (
((min && datejs >= min) || !filterVals.min) &&
((max && datejs <= max) || !filterVals.max)
);
}
);
console.log(filteredData);
return filteredData;
};
const columns = [
{
dataField: "id",
text: "Product ID"
},
{
dataField: "name",
text: "Product Name",
filter: textFilter()
},
{
dataField: "date",
text: "Date",
filter: customFilter({
onFilter: filterDate
}),
filterRenderer: (onFilter, column) => (
<PriceFilter onFilter={onFilter} column={column} />
)
}
];
const products = [
{
id: 0,
name: "Product 1",
date: "2021-12-24"
},
{
id: 1,
name: "Product 2",
date: "2022-01-02"
},
{
id: 2,
name: "Product 3",
date: "2022-01-05"
},
{
id: 3,
name: "Product 4",
date: "2022-01-07"
}
];
const Table = () => {
return (
<BootstrapTable
keyField="id"
data={products}
columns={columns}
filter={filterFactory()}
/>
);
};
export default Table;
I need to help convert to function componant