使用React在Bootstrap表上渲染API时出现问题

Question

我对React很陌生，我正在尝试呈现一个API，但是它正在每个端点创建一个新的Table，我认为这个问题是因为我正在映射但我不知道还要做什么。

先谢谢您的帮助。

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

   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>
    );
  }
}

Answer 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>
    )
  }
}

Answer 2

只想添加到Alcantara答案：

1. super()用于扩展React库中的props

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

2. 您会经常看到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> ) } 

3. 对于您的特殊情况，我可能是错的（我看不到数据和样式的全部内容），但是显示材料列表的更常规方式是使用<ul></ul> <li></li>标签