尝试将 API 请求与网格渲染相结合

Question

所以我已经为 API 请求和网格渲染编写了两块代码，但是我对如何在反应环境中将两者结合起来感到困惑。有什么建议吗？

（这是使用 react-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 的 api 调用中提取的数据来渲染网格

// 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')
);

Answer 1

您可以将 API 调用的结果插入到组件的状态中。在您的请求组件中，试试这个： onSuccess={(response)=> this.setState({ list: response });。您也可以考虑在 componentWillMount 这样的组件生命周期方法中进行 API 调用，而不是在 Axios 组件中。

然后在您的渲染方法中，将您对本地占位符list 的引用替换为this.state.list。显然，您需要对其进行调整以使其在您的组件结构中工作，但如果没有看到完整的组件，这至少应该让您朝着正确的方向前进。