Глобально подавите c# предупреждения компилятора

Это происходит потому, что когда вы выбираете данные в то время, вы реагируете на рендеринг компонента, и вы получаете ошибку, так как this.state.data по-прежнему {} , поэтому this.state.data.recipes [0] еще не определено , поскольку запрос на выборку не завершен (это занимает некоторое время). Для ее решения необходимо вернуться на 2 условиях.

1. когда выборка запущена (Загрузка)

2) когда выборка завершена

 render() {
   if(!this.state.data.recipes){
    // if the fetch request is still not completed
    return (
       <div>
      <h1>Loading .... </h1>
       </div>
     )
   }
 // run when fetch request is completed and this.state.data is now assigned some data
    return (
      <div className="App">
        <h1>{this.state.data.count}</h1>
        <p>{this.state.data.recipes[0].publisher}</p> // Why this doesn't work?
      </div>
    );
  }

<час> ответ для вашего комментария . ошибка не может прочитать свойство 0 неопределенного, что означает, что this.state.data.recipes не определено и, следовательно, .state.data.recipes [0] является ошибкой, верно?.

Но когда вы используете this.state.data.count, вы не получите ошибку. Так как будет напечатано undefined , что является значением count (в этот момент вы не пытаетесь печатать дальше, как this.state.data.count.toString(), если вы это сделаете, то через вас ошибка не может прочитать свойство toString ( ) из неопределенного ).
и в then (), когда вы используете this.setState (), он обновляет состояние и реагирует повторно на все задействованные компоненты.