APIリクエストとグリッドレンダリングを組み合わせようとしています

Question

APIリクエストとグリッドレンダリングの両方のコードを作成しましたが、2つの方法を組み合わせる方法は混乱しています反応環境。助言がありますか？

（これは反応-axiosを使用している）

<Request 
     method="get", /* get, delete, head, post, put and patch - required */ 
     url="http://coincap.io/front", /* url endpoint to be requested - required */ 
     debounce={50} /* minimum time between requests events - optional */ 
     onSuccess={(response)=>{}} /* called on success of axios request - optional */ 
     onError=(error)=>{} /* called on error of axios request - optional */ 
    /> 

私はこのハードコーディングされたデータを削除し、データをグリッドをレンダリングするために探していますCoinCap.io

// Grid data as an array of arrays 
const list = [ 
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125 /* ... */ ] 
    // And so on... 
]; 

function cellRenderer ({ columnIndex, key, rowIndex, style }) { 
    return (
    <div 
     key={key} 
     style={style} 
    > 
     {list[rowIndex][columnIndex]} 
    </div> 
) 
} 

ReactDOM.render(
    <Grid 
    cellRenderer={cellRenderer} 
    columnCount={list[0].length} 
    columnWidth={150} 
    height={300} 
    rowCount={list.length} 
    rowHeight={60} 
    width={700} 
    />, 
    document.getElementById('root') 
); 

へのAPI呼び出しから引き出さ

Answer 1

APIコールの結果をコンポーネントの状態に挿入できます。リクエストコンポーネント内で、次を試してください： onSuccess={(response)=> this.setState({ list: response });また、Axiosコンポーネントの代わりにcomponentWillMountのようなコンポーネントのライフサイクルメソッド内でAPI呼び出しを行うことを検討することもできます。

レンダリングメソッドで、ローカルプレースホルダlistの参照をthis.state.listに置き換えます。明らかに、これを調整してコンポーネント構造内で動作させる必要がありますが、完全なコンポーネントを見ることなく、少なくとも正しい方向に動かす必要があります。