beginner at react.js - 後で更新される状態からコンポーネントをレンダリングする

Question

フェッチと呼ばれるJSONオブジェクトからリストコンポーネントをレンダリングすることをテストしようとしていますが、JSONが返される前にレンダリングが呼び出されていると思われます定義されていないエラーdebug alert（）は値を取得しますが、レンダリングでは未定義のエラーが発生しています。これをどうすれば処理できますか？データが取得された後にレンダリング関数を呼び出す方法はありますか？私はどのようにデータをレンダリングするのですか？データが到着したら更新しますか？インラインラッパーとして呼び出されたときに、if（！オブジェクト）doesn; tが動作することに注意してください。なぜ、どうしたらいいですか？初心者の質問には申し訳ありません。私は、データフレームワークを使用して反応のデータを表示することを意図していたと考えますが、フレームワークを少なくして学習を開始し、基本を取得したいと考えました。どうもありがとう！ - コードは次のとおりです。

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 
class ItemLister extends React.Component { 
constructor(props) { 
    super(props); 
    this.state = { items: [] }; 
} 
componentDidMount() { 
    let url = "http://localhost:8888"; 
    let iterator = fetch(url, {method: 'GET'}); 
    iterator 
    .then(response => { 
    //console.log('sss', response) 
     return response.json(); 
    }) 
    .then(post => { 
     //console.log(post) 
     this.state.items = post; 
     alert(this.state.items.users[3].firstname); 
    }); 
} 
output(object){ 
    if (!object){ 
     return '?'; 
    }else{ 
     return object; 
    } 
} 
render() {   
    return(
     <div> 
      <div>Items:</div> 
      <div>{this.output(this.state.items.users[3].firstname)}</div> 
     </div> 
    ); 
} 
}    
export default ItemLister; 

Answer 1

あなたのレンダリング機能は次のようなものが考えられます。あなたのデータが到着するまで、あなたのデータをフェッチするので、基本的に、あなたが、プレースホルダのコンポーネントをレンダリング

render() { const username = (this.state.items === []) ? placeholder : this.output(this.state.items.users[3].firstname; return( <div> <div>Items:</div> <div>{username}</div> </div>
); }

は非同期とcomponentDidMountでありますので、レンダリングはデータを取得する前に最初に行われます。

このコンポーネントが一般的にどのように構築されているかを再考したいと思いますが、なぜユーザー[3]に具体的にアクセスしていますか？