Question

我有一个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>    
        )
    }
}

Answer 1

您的jquery库不知道表中有数据。它在React中不能很好地发挥作用。您应该使用React或这个库。如果删除jquery，则“ No data”消息将消失。

如何摆脱表数据第一行上的“表中没有数据”消息？

1 个答案: