使用 React 在引导表上呈现 API 时出现问题答案

【问题标题】：Problem Rendering an API on a Bootstrap Table with React使用 React 在引导表上呈现 API 时出现问题
【发布时间】：2019-03-23 20:55:00
【问题描述】：

我对 React 很陌生，我正在尝试渲染一个 API，但它在每个端点创建新表，我认为问题是因为我正在映射但我不知道还能做什么。

提前感谢您的帮助。

我是否应该为表格创建一个新组件

   class App extends Component {
  constructor() {
    super();
    this.state = {};
  }
  componentDidMount() {
    fetch(url)
      .then(results => {
        return results.json();
      })
      .then(data => {
        let coins = data.map(coin => {
      return( 
        <div>

        <Table striped bordered hover variant="dark">
          <thead>
            <tr>
              <th>#</th>
              <th>Sign</th>
              <th>Name</th>
              <th>Market Cap</th>
              <th>Price</th>
              <th>Change 24h</th>
              <th>Buy</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{coin.market_cap_rank}</td>
              <td>{coin.symbol}</td>
              <td>{coin.name}</td>
              <td>{coin.market_cap}</td>
              <td>{coin.current_price}</td>
              <td>gerfds</td>
              <td>@mdo</td>
            </tr>

          </tbody>
        </Table>
        </div>
      )
        });
        this.setState({ coins: coins });
      });
  }
  render() {
    return (
      <div className="container">
       <HeadJumbotron />
        <div className="container2">{this.state.coins}</div>
      </div>
    );
  }
}

【问题讨论】：

标签： reactjs api fetch

【解决方案1】：

没关系，您对反应很陌生，总是尝试阅读文档，尤其是在组件生命周期中您似乎不理解它。您可能会在代码上遇到一些错误，因为我不知道您的 api 返回什么。但这就是你的代码的样子。

  class App extends Component {
  constructor() {
    super();
    this.state = {
    // i am asumming you are returning data
     data : [];
    };
  }
  componentDidMount() {
    fetch(url)
      .then(results => {
           //return results.json(); get the data from here and set it to state  here. am assuming is called data
       this.setState({
          data:results.data
       })
      })

  }
  render() {

   let coins = this.state.data.map(coin => (


  // i am assuming you have and id field else change it to any unique value
            <tr key={coin.id}>
              <td>{coin.market_cap_rank}</td>
              <td>{coin.symbol}</td>
              <td>{coin.name}</td>
              <td>{coin.market_cap}</td>
              <td>{coin.current_price}</td>
              <td>gerfds</td>
              <td>@mdo</td>
            </tr>





        ))
    return (
      <div className="container">
       <HeadJumbotron />
        <div className="container2">
        <table striped bordered hover variant="dark">
          <thead>
            <tr>
              <th>#</th>
              <th>Sign</th>
              <th>Name</th>
              <th>Market Cap</th>
              <th>Price</th>
              <th>Change 24h</th>
              <th>Buy</th>
            </tr>
          </thead>
          <tbody>
          {coins}
        </tbody>
        </table>
        </div>
      </div>
    )
  }
}

【讨论】：

【解决方案2】：

只想添加到 Alcantara 答案：

super() 用于从 React 库扩展 props

   constructor(props) { 
    super(props); 
    this.state = {
     data : [];
    };
   }

你会经常看到在 JSX 中执行的 map 函数（这就是你最初的问题）

render() {
    return (
      <div className="container">
       <HeadJumbotron />
        <div className="container2">
        <table striped bordered hover variant="dark">
          <thead>
            <tr>
              <th>#</th>
              <th>Sign</th>
              <th>Name</th>
              <th>Market Cap</th>
              <th>Price</th>
              <th>Change 24h</th>
              <th>Buy</th>
            </tr>
          </thead>
          <tbody>
          {this.state.data.map(coin => (
        <tr key={coin.id}>
          <td>{coin.market_cap_rank}</td>
          <td>{coin.symbol}</td>
          <td>{coin.name}</td>
          <td>{coin.market_cap}</td>
          <td>{coin.current_price}</td>
          <td>gerfds</td>
          <td>@mdo</td>
        </tr>))}
        </tbody>
        </table>
        </div>
      </div>
    )
  }

对于您的特定情况，我可能是错误的（我看不到数据和样式的全部内容），但更传统的显示内容列表的方式是使用 <ul></ul> <li></li> 标签
李>

【讨论】：