Функции с данными не работают с Reactjs

Question

Я использую Datatable Library, чтобы легко рисовать таблицу.

И я получил данные с помощью Fetch API и рендеринг в таблицу, и он работает хорошо.Но я не знаю, почему функции DataTable, такие как сортировка, поиск, отображение параметров.

Как видите, вы получаете данные из API и визуализируете в HTML.они работают хорошо, но когда я нажимаю сортировку или функцию поиска, она меняется на это.

Также другие функции, такие как интервал данных из API каждые 10 секунди рендеринг в таблицу работает хорошо.

Кажется, что есть некоторые проблемы в начальном состоянии.

import React, { Component } from 'react';
import './PostContainer.css';

class PostContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableData: {
        status: '0000',
        data: {
          loading: { sell_price: 'loading', volume_7day: 'loading' },
        },
      },
    };
  }
  async componentDidMount() {
    this.getData();
    this.interval = setInterval(() => {
      this.getData();
    }, 10000);
  }

  getData() {
    fetch('https://api.bithumb.com/public/ticker/all')
      .then(res => {
        const data = res.json();
        return data;
      })
      .then(res => {
        this.setState({
          tableData: res,
        });
      })
      .catch(error => {
        console.error(error);
      });
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    let data = this.state.tableData;
    let chart = [];
    console.log(data);
    if (data.status === '0000') {
      delete data.data['date'];
      for (let [key, value] of Object.entries(data.data)) {
        chart.push(
          <tr key={key}>
            <td>{key}</td>
            <td>{value.sell_price}</td>
            <td>{value.volume_7day}</td>
          </tr>
        );
      }
    } else if (
      data.status === '5500' ||
      data.status === '5600' ||
      data.status === '5900'
    ) {
      this.setState({
        tableData: {
          data: {
            ERROR: {
              sell_price: 'ERROR with API',
              volume_7day: 'ERROR with API',
            },
          },
        },
      });
    }
    return (
      <div className="Post">
        <table id="table" className="table table-striped table-bordered">
          <thead>
            <tr>
              <th>Coin Name</th>
              <th>Current Price</th>
              <th>Volume</th>
            </tr>
          </thead>
          <tbody>{chart}</tbody>
        </table>
      </div>
    );
  }
}

export default PostContainer;

Может получить доступ к DEMO напрямую.Я загрузил на Github Pages.

Answer 1

Я могу вспомнить 2 вопроса, чтобы искать

a.

Если вы видите на скриншоте, нет нумерации страниц.

Когда я пытаюсь загрузить DEMO с открытой консолью разработчика.

Он работает нормально, и вы увидите пагинацию, которая будет показывать 10 записей одновременно.

Проверьте код для Datatable код инициализации в index.js

$('#table').DataTable({
    order: [[1, 'desc']],
});

Убедитесь, что указанный выше код вызывается после загрузки данных в HTML

б.

Ваше значение состояния не обновляется до фактических значений при сортировке

 tableData: {
        status: "0000",
        data: {
            loading: {
                sell_price: "loading",
                volume_7day: "loading"
            }
        }
    }