Question

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

然后我使用Fetch API获取了数据并渲染到表中，并且效果很好。但是我不知道为什么DataTable Funcions喜欢排序，搜索，显示选项。

如您所见，从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

我可以想到要寻找的两个问题

a。

如果您在屏幕快照中看到，则没有分页。

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

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

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

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

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

b。

排序时状态值未更新为实际值

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

数据表功能不适用于Reactjs

1 个答案: