如何摆脱表格数据第一行的“表格中没有可用数据”消息？答案

【问题标题】：How to get rid of "No data available in table" message on the top row of the table data?如何摆脱表格数据第一行的“表格中没有可用数据”消息？
【发布时间】：2019-08-30 11:15:47
【问题描述】：

我有一个 React 应用程序。我在哪里使用 usgs api 获取地震数据，我在使用 jQuery Datatables，但是当我在表中显示数据时，第一行显示“表中没有可用数据”消息。它下面的行显示正确的数据。

如何从表格中删除这一行？

componentDidMount(){
    axios.get('https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2014-01-01&endtime=2014-01-02')
        .then(response =>{
            console.log(response)
            this.setState({
                posts : response.data.features
            },()=>console.log(this.state.posts.features))
        })
        .catch(error =>{
            console.log(error)
            this.setState({
                error : 'Error retrieving data'
            })
        })
}

render(){
    const{posts,error} = this.state
    return(
        <div>
        <table id="earthquakes">
            <thead>
                <tr>
                    <th></th>
                    <th>Magnitude</th>
                    <th>Place</th>
                </tr>
            </thead>
            <tbody>

            {posts.length ?
            // posts.map(post=><div key={post.id}>{post.properties.place}</div>):
            posts.map(post=><QuakeShow key={post.id} post={post} ></QuakeShow>):
            null}

            </tbody>
        </table>
        </div>
    )
}

class QuakeShow extends Component {
    render(){
        const {post} = this.props
        return(
            <tr>
                <td><img url="C:\Users\acer\Documents\ReactWorkspace\earthquake\resources\earthquake.png"/></td>
                <td>{post.properties.mag}</td>
                <td><a href={post.properties.url}>{post.properties.place}</a></td>
            </tr>    
        )
    }
}

【问题讨论】：

不是一个答案，但我会避免在 React 应用程序中使用 jQuery。试试 react-tables 吧
我会用 Scartch 构建表格。简单的 html 和 css..没有量子力学。
添加 redux 和时间旅行调试 (redux devtools) 总是可以帮助我解决这些“丢失数据”的错误
感谢@EvaCohen，但我是初学者，我还不了解redux
@DarrenSweeney 好的，我会试试的

标签： jquery reactjs datatables

【解决方案1】：

您的 jquery 库不知道表中有数据。它不能很好地与 React 配合使用。您应该使用 React 或这个库。如果您删除 jquery，您的“无数据”消息将消失。

【讨论】：