javascript - 数据表函数不适用于 Reactjs

Question

我正在使用数据表库轻松绘制表格。

我通过 Fetch API 获得了数据并渲染到表中，效果很好。但我不知道为什么 DataTable 功能喜欢排序、搜索、显示选项。

如您所见，从 API 获取数据并渲染为 HTML 效果很好，但是当我单击排序或搜索功能时，它会变成这样。

另外一个功能，比如每隔 10 秒从 API 获取一次数据并渲染到表格，效果也很好。

初始状态似乎存在一些问题。

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 个问题

一。

如果您在屏幕截图中看到没有分页。

当我尝试在开发者控制台打开的情况下加载演示时。

它工作正常，您将看到分页，一次显示 10 条记录。

检查 index.js 中 Datatable 初始化代码的代码

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

确保在 HTML 中加载数据后调用上述代码

b.

排序时您的状态值不会更新为实际值

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