Проблема рендеринга API в таблице начальной загрузки с React

Question

Я довольно новичок в 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>
    );
  }
}

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

Просто хочу добавить в алькантару ответ:

1. super() используется для расширения реквизита из библиотеки React

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

2. Вы чаще будете видеть функцию карты, выполняемую внутри JSX (то, чем изначально была ваша проблема)

   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> тегов