にconsole.logプリントがreactjs/mobxプロジェクトでは動作しません

Question

私は私のMobxストアの下のフェッチ要求があります。私は以下のReactJSクラスでこれを使用しています

getAllLegoParts = action("get all lego",() => { 
this.legoParts = fromPromise(
    fetch("http://localhost:8000/LegoPieces", { 
    method: "GET", 
    cache: "no-store" 
    }).then(response => response.json()) 
); 
}); 
} 

：

を二回

1. CONSOLE.LOGプリント - 未定義の印刷物であるケースでは、第二に：

   class ViewLegos extends Component { 
   constructor(props) { 
   super(props); 
   this.props.store.getAllLegoParts(); 
   } 
   
   render() { 
   console.log(this.props.store.legoParts.value); 
   return (
       <div> 
       <table> 
        <thead> 
        <tr> 
         <th>Piece</th> 
         <th>Type</th> 
        </tr> 
        </thead> 
        <tbody> 
        {this.props.store.legoParts.map(legoPart => (
         <tr key={legoPart.id}> 
         <td>{legoPart.piece}</td> 
         <td>{legoPart.piece}</td> 
         <td>{legoPart.type}</td> 
         </tr> 
        ))} 
        </tbody> 
       </table> 
       </div> 
   ); 
   } 
   } 
   
   export default inject("store")(observer(ViewLegos)); 
   

   は、しかし、私は2つの問題を抱えていますオブジェクトの配列を出力します（これは私が望むものです）。

2. 私はというエラーを取得：

   TypeError: this.props.store.legoParts.map is not a function 
   

グレイトフルあなたの助け！

Answer 1

表示データを取得する前にコンポーネントがマウントされるまで待つことはできますか？ここに役立つかもしれないいくつかの擬似コードです：

class ViewLegos extends Component { 

    componentDidMount() { fetchLegos() } 

    render() { 
    const allowRender = this.props.store.legoParts && this.props.store.legoParts.length 

    if (allowRender) { 
     // display lego data 
    } 

    return null 
    } 

} 

をこの例では、コンポーネントは、マウントデータをフェッチするのを待ち、それが存在する場合にのみ、それを表示します。

あなたのコードを見てみると、legoPartsがまだ定義されていないときは、より防衛的でコンポーネントの表示を処理する必要があるようです。レンダリングの前に非同期フェッチが完了しないため、最初は定義されません。