Uncaught TypeError: Cannot read property 'post' of undefined

The below is my code:

import * as React from 'react';
import styles from './PostTest.module.scss';
import { IPostTestProps } from './IPostTestProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { TextField } from 'office-ui-fabric-react/lib/TextField';  
import { IButtonProps, DefaultButton } from 'office-ui-fabric-react/lib/Button';  

import { SPHttpClient, SPHttpClientResponse, ISPHttpClientOptions } from '@microsoft/sp-http';


import {
 Environment,
 EnvironmentType
} from '@microsoft/sp-core-library';

export interface IComponentState{
  title: string;
}

export default class PostTest extends React.Component<IPostTestProps, IComponentState> {

  constructor(props: IPostTestProps, state: IComponentState){
    super(props);
    this.state = ({
      title: ''
    });

    this._saveClicked = this._saveClicked.bind(this);
  }

  public render(): React.ReactElement<IPostTestProps> {
    return (<div className={ styles.postTest }><div className={ styles.container }><div className={ styles.row }><div className={ styles.column }><span className={ styles.title }>Welcome to SharePoint!</span><p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p><p className={ styles.description }>{escape(this.props.description)}</p><a href="https://aka.ms/spfx" className={ styles.button }><span className={ styles.label }>Learn more</span></a><TextField 
                label="Standard" 
                value={this.state.title}
                onChanged={e => this.setState({ title: e })} 
              /><DefaultButton
                onClick={this._saveClicked}>
              Save</DefaultButton></div></div></div></div>
    );
  }

  private _saveClicked(): void {  
    alert('Hello ' + this.state.title);
    let requestlistItem: string = JSON.stringify({
      '__metadata': { "type": "SP.Data.ShipListItem" },"Title": this.state.title,"RequesterId":10
      });
    requestlistItem = requestlistItem.substring(1, requestlistItem .length-1);
    requestlistItem = '{' + requestlistItem +'}';
    console.log(requestlistItem);

    this.context.spHttpClient.post(`${this.context.pageContext.web.absoluteUrl}/_api/web/lists/getbytitle('Ship')/items`, SPHttpClient.configurations.v1, {
      headers: {
      'Accept': 'application/json;odata=nometadata',
      'Content-type': 'application/json;odata=verbose',
      'odata-version': ''
      },
      body: requestlistItem
      })
      .then((response: SPHttpClientResponse) => {
        // Access properties of the response object. 
        console.log(`Status code: ${response.status}`);
        console.log(`Status text: ${response.statusText}`);

        //response.json() returns a promise so you get access to the json in the resolve callback.
        response.json().then((responseJSON: JSON) => {
          console.log(responseJSON);
        });
      });
  }   
}

When I press the "Save" button, I am getting the following error:

Uncaught TypeError: Cannot read property 'post' of undefined.

I already have a sharepoint list called "Ship".