时间戳

首页 > 解决方案 > 获取 JSON 数据数组，如何将其与 React Bootstrap Table 一起使用？

reactjs - 获取 JSON 数据数组，如何将其与 React Bootstrap Table 一起使用？

问题描述

在这里查看我的代码：

class HomePage extends React.Component {
    constructor() {
        super();
        this.state = {
            listing: [],
        };
    }

    componentDidMount() {
        fetch('https://api.coinmarketcap.com/v2/ticker/?convert=USD&structure=array')
            .then(data => {
                return data.json();
            }).then(data => {
            let listing = data.data.map((list) => {
                return (
                    <tr key={list.id}>
                        <td>{list.id}</td>
                        <td>{list.rank}</td>
                        <td>{list.name} </td>
                        <td>{list.quotes? (list.quotes.USD||{}).price||0 : 0}</td>
                        <td>{list.symbol}</td>
                        <td>{list.quotes.USD.volume_24h}</td>
                        <td>{list.quotes.USD.percent_change_24h}%</td>
                    </tr>
                )
            });
            this.setState({listing: listing});
            console.log("state", this.state.listing);
        })
    }

    render() {
        return (
            <div>
                <div className="jumbotron">
                    <div className="container">
                        <h3>Cryptocurrency Statistics</h3>
                        <br/>
                        <BootstrapTable data={this.state.listing} striped hover>
                            <TableHeaderColumn isKey dataField='id'>ID</TableHeaderColumn>
                            <TableHeaderColumn dataField='name'>Name</TableHeaderColumn>
                            <TableHeaderColumn dataField='price'>Price</TableHeaderColumn>
                            <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
                            <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
                            <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
                        </BootstrapTable>
                    </div>
                </div>
            </div>
        );
    }
}

export default HomePage;

我正在使用 coinmarketcap api。检索在普通 html 表中工作，但此 api 中的最大数据为 100 个元素。所以我想改用分页表。如果此结构不起作用，请提出其他解决方案。

标签： reactjs

解决方案

我不熟悉 React Bootstrap Table，但我建议的逻辑可能适合任何数据表。

对于我很快看到的 API 支持start和limit选项，因此，您需要做的是将获取逻辑移动到特定方法并在内部调用componentDidMount一次。然后，按钮Next和 Prev可以在您想要对数据进行分页时调用此方法。您必须跟踪当前页面。

PS：请记住，我没有测试过这个，但我希望你能理解它背后的逻辑。

class HomePage extends React.Component {
  state = { currentPage: 0, data: [], isLoading: false }

  fetchData = page => {
    this.setState({ isLoading: true })
    //Set it to the amount of records you want per page
    const rowsPerPage = 100
    const start = this.state.currentPage * rowsPerPage
    fetch(`https://api.coinmarketcap.com/v2/ticker/?convert=USD&structure=array&start=${start}`)
      .then(data => data.json())
      .then(({ data }) => {
        this.setState({
          data,
          currentPage: page,
          isLoading: false
        })
      })
  }

  componentDidMount() {
    this.fetchData(this.state.currentPage)
  }

  render() {
    const { currentPage, data, isLoading } = this.state

    // Always a good thing to check if the data is loaded
    if (isLoading)
      return <div>Loading...</div>

    // Maybe you'll need a better logic here
    const prevPage = currentPage === 0 ? 0 : currentPage - 1;
    const nextPage = currentPage + 1;

    // Implement your rendering logic here
    const rows = data.map(row => <tr><td>{row.name}</td></tr>)

    // Render the table
    // Take a look at the onClick handlers
    return (
      <div>
        <table>
          <tbody>
            {rows}
          </tbody>
        </table>
        <button onClick={() => this.fetch(prevPage)}>Prev</button>
        <button onClick={() => this.fetch(nextPage)}>Next</button>
      </div>
    )
  }
}
}

推荐阅读