Erro this.state.articles.map is not a function.

Estou tentando carregar os titutlos de um ajax rm uma

• mas o seguinte erro aparece no meu console

this.state.articles.map is not a function.

O que pode ser?

import React, { Component } from 'react';
import './App.css';
import $ from 'jquery';
import ArticleItem from './components/ArticleItems';

class App extends Component {

  constructor() {
    super();
    this.state = {
      appTitle: "My app",
      articles: [] 
    };
  }

  componentWillMount(){
    $.ajax({
      url:"https://newsapi.org/v2/top-headlines?country=us&apiKey=c37ce183e01746c095b37b25178395be",
      dataType: "json",
      success: function(ajaxArticleList){
        console.log("I reveiced the ajax file");
        console.log(ajaxArticleList);
        this.setState({articles:ajaxArticleList});
      }.bind(this)
    })
  };

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">{this.state.appTitle}</h1>
        </header>

        <ArticleItem />

        {

          this.state.articles.map(function(websiteArticles){
            console.log("entrou no li");
            return(
              <li>{websiteArticles.title}</li>
            );
          })
        }



      </div> 
    );

  }
}

export default App;