Set state using the API does not work; state - empty object

Question

Here is the React component in question.

import React from 'react';

class JSONTest extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            title: '',
            description: '',
            lang: ''
        }
    }

    componentDidMount() {
        this.serverRequest = $.ajax({
            url: "/jinra/api/public/test",
            success: (data) => {
                this.setState({
                    title: data.title,
                    description: data.description,
                    lang: data.lang
                });
            }
        })
    }


    componentWillUnmount() {
        this.serverRequest.abort();
    }

    render() {
        return (
            <div>
                <h1>Title: {this.state.title}</h1>
                <p>Description: {this.state.description}</p>
                <p>Language(s): {this.state.lang}</p>
            </div>
        )
    }
};

module.exports = JSONTest;

However, when I go to React Developer Tools and see what the state of the component is, it says that it is an empty object, although I clearly set the state in the empty string constructor. I tested my API call, which works great. Here is the JSON output when visiting my API:

{"title":"Title","description":"This is a description.","lang":"Python"}

What am I doing wrong? I suggested that this.setState () re-renders the view, but this is apparently not the case.