Javascript this.props.onSave不是函数-未捕获的typescript错误

我有一个表单，当有人保存它时，我希望它以博客格式显示在我的第一页上。单击“保存”按钮时出错。错误是：

未处理的拒绝（TypeError）：\u this.props.onSave不是函数

在下面的一行：

handleSave=（e）=>e.preventDefault（）； const id=this.prop.onSave（this.state.post）

如何解决此错误？我正在将Nextjs与Typescript一起使用。

这是我的文件App.tsx（路由）和NewQuestion.tsx（保存按钮）

导出默认类NewQuestion.Component{
状态={
帖子：{title:''，fullName:''，body:''，createdAt:''，updatedAt:''}
updateValue=（e:{target:{name:any；value:any；}；}）=>{
const{post}=this.state；
这是我的国家({
post:{…post[e.target.name]：e.target.value}}；}
handleSave=async（e:{preventDefault:（）=>void；}）=>{
e、 预防默认值（）；
const id=等待此消息
.道具
.onSave（this.state.post）；
this.props.history.replace（`/posts/${id}`）}
render（）{
const{post}=this.state；
报税表（
新问题
{/*全名*/}
全名
问题:
你能创建一个沙盒吗？sandbox for Nextjs需要先上传到Github上。这段代码似乎与React+Typescript配合得很好。错误是当我在Nextjs@RenjiJosephSabuNiravathoh中使用相同的代码时。好的。我不熟悉Nextjs。祝你好运。你能试着将你的
This.props
记录在
N的第一行吗ewQuestion
组件是否要查看其值？我应该将其添加到哪行下方？@Michalis？您是否希望我执行console.log（this.props）？
export default class NewQuestion extends React.Component<Props> {

    state = {
        post: {title: '', fullName: '',body: '',createdAt: '',updatedAt: '' }}

    updateValue = (e: { target: { name: any; value: any; }; }) => {
        const { post } = this.state;
        this.setState({
            post: {...post,[e.target.name]: e.target.value} });}
    handleSave = async (e: { preventDefault: () => void; }) => {
        e.preventDefault();
        const id = await this
            .props
            .onSave(this.state.post);
        this.props .history .replace(`/posts/${id}`)}

    render() {
        const { post } = this.state;
        return ( <Box> <div className="post-form"><Title>
                        <TextName>New Question</TextName>
                    </Title>
                    <div className="post-form-field">
                        {/* <label>Full Name</label> */}
                        <H5 >Full Name
            <Inputbox type="text" name="fullName" value={post.fullName}
                                onChange={this.updateValue} />
                        </H5>
                    </div>
                </div>
                <form onSubmit={this.handleSave}>
                    <div className="post-form-field post-form-field-text">
                        <QuestionText >Question</QuestionText>
                        <Questionbox
                            data-testid='quest'
                            name="body"
                            value={post.body}
                            placeholder="Start your question”                            
                 onChange={this.updateValue} /></div>
                        <div className="post-form-buttons">
                            <Button type="submit" data-testid='add-question' value="Save">
                                Add Question  </Button>
                            <Cancel>
                                <Link href={`/`}><A>Cancel</A></Link>
                            </Cancel>
                        </div></form></Box>);}}

 // import statements
 class App extends React.Component<{},
    Props> {
    state = {
        db: new DB('QA'),
        posts: {},
        loading: true};

    async componentDidMount() {
        const posts = await this
            .state
            .db
            .getAllPosts();
        this.setState({ posts, loading: false });}

    handleSave = async (post) => {
        let { id } = await this
            .state
            .db
            .createPost(post);

        const { posts } = this.state;
        this.setState({
            posts: {
                ...posts,
                [id]: post}});
        return id;}

    render() {
        if (this.state.loading) {
            return <h2>Loading, please wait...</h2>}

        const LocationDisplay = withRouter(({ location }) => (
            <div data-testid="location-display">{location.pathname}</div>
        ))
        return (
            <div className="All-Routes">
                <Switch>
                    <Route
                        exact
                        path="/"
                        component={props => (<IndexPage  {...props} posts={this.state.posts} />)} />
                    <Route
                        path="/posts/:id"
                        component={(props) => <ShowPage {...props} post={this.state.posts[props.match.params.id]} />} />
                    <Route
                        exact
                        path="/new"
                        component={(props) => <NewQuestion {...props} onSave={this.handleSave} />} />
                </Switch>
                <LocationDisplay />
            </div>
        );
    }
}
export default App