this.props.onSave не является функцией- Uncaught ошибка машинописного текста

Question

У меня есть форма, и когда кто-то ее сохраняет, я хочу, чтобы она отображалась в формате блога на моей первой странице. Я получаю сообщение об ошибке, когда нажимаю кнопку «Сохранить» . Ошибка:

Необработанный отказ (ошибка типа): _this.props.onSave не является функцией

В строке ниже:

handleSave = (e) => e.preventDefault (); const id = this.prop .onSave (this.state.post);

Как я могу устранить эту ошибку? Я использую Далее js с Typescript.

Здесь находятся мои файлы App.tsx (Маршрутизация ) и NewQuestion.tsx (кнопка Сохранить)

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>);}}

App.tsx

 // 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