嘗試將API請求與網格渲染結合

因此，我已經爲API請求和網格渲染編寫了兩個代碼塊，但是我很困惑如何將這兩個代碼組合在一起反應環境。有什麼建議麼？嘗試將API請求與網格渲染結合

（這是使用反應 - 愛可信）

<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 */ 
    />

我期待刪除此硬編碼的數據，並呈現從API調用拉到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') 
);

數據網格

來源

2017-06-20 loop13side7

您可以將API調用的結果插入組件的狀態。在你的請求組件裏面，試試這個： onSuccess={(response)=> this.setState({ list: response });。您也可以考慮使用組件生命週期方法（如componentWillMount）代替Axios組件進行API調用。

然後在您的渲染方法中，將您的引用替換爲本地佔位符list與this.state.list。顯然你需要調整它以使它在你的組件結構中工作，但是如果沒有看到完整的組件，這應該至少讓你朝着正確的方向前進。

來源

2017-06-21 00:27:01

真棒謝謝唐尼。我已經看到了生命週期方法，但沒有學到太多關於它們的知識，所以我會進一步研究這些，我很欣賞這些。 – loop13side7

Donny，生命週期方法中的API調用看起來像什麼？ – loop13side7

嘗試將API請求與網格渲染結合

回答

相關問題