首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >React:如何在点击按钮后刷新表格中的数据

React:如何在点击按钮后刷新表格中的数据
EN

Stack Overflow用户
提问于 2018-12-18 04:20:20
回答 2查看 3.3K关注 0票数 0

我正在尝试设置刷新按钮,以便在最终用户创建新票证时,我按下刷新按钮时可以看到新创建的票证。我正在使用Apollo客户端从graphql服务器获取数据。我想知道我应该如何刷新我的表格我尝试了forceUpdatethis.setState(),我验证了它的工作通过把{Math.random()}在渲染函数,但是,它不刷新和给出新的数据,也试着把刷新按钮在button.js仍然存在的问题。window.location.reload()可以工作,但这不是我想要的,有没有什么react可以像任何生命周期钩子一样做,我试过了:

代码语言:javascript
运行
复制
componentWillReceiveProps(nextProps) {
  if(this.props.ticket !== nextProps.ticket) {
     console.log(this.props.ticket)
  }
}

在table.js中,但是它没有起到作用,或者我不得不使用一些Apollo客户端API。请提前提出来,谢谢!

App.js

代码语言:javascript
运行
复制
class App extends Component {
  constructor(props) {
    super(props);
    this.handleRefresh =  this.handleRefresh.bind(this);

  }

  handleRefresh()  {
    this.forceUpdate();
  }

  render() {
    const { data: {loading, getTickets}} = this.props;
    if(loading) {
      return <h4>Loading..</h4>
    }

    const Data = getTickets.map((ticket, id) => {
       return <Table ticket={ticket} key={id} />
    })


    return (
      <div className="App">
        <header className="App-header">
          <Header />
          <Button className="lookup" bsStyle="info" bsSize="xsmall" 
onClick={this.handleRefresh}><h5>lookup 1</h5></Button><br/><br/>
              <div className="container" style={{overflowX:"auto"}}>
                <div className="table-responsive">
                  <table className="table table-bordered table-hover">
                          <thead>
                            <tr>
                              <th>TicketID</th>
                              <th>Name</th>
                              <th>Comment</th>
                              <th>EmpID</th>
                            </tr>
                          </thead>
                          <tbody>
                              {Data}
                          </tbody>
                    </table>
               </div>
               <h4>Random number : {Math.random()}</h4>
              </div>
            </header>
          </div>
        );
    }
    }

    export default compose(
     graphql(GetTickets)
    )(App);

table.js

代码语言:javascript
运行
复制
import React, { Component } from 'react';
import PropTypes from 'prop-types';


class Table extends Component {
    constructor(props) {
        super(props);

    }

    render() {
        return (
          <tr>
                <td>{this.props.ticket.ticketID}</td>
                <td>{this.props.ticket.name}</td>
                <td>{this.props.ticket.comment}</td>
                <td>{this.props.ticket.EmpID}</td>
          </tr>

        )
    }
}


Table.propTypes = {
    ticketID: PropTypes.number,
    name: PropTypes.string,
    EmpID: PropTypes.number,
    comment: PropTypes.string
}


export default Table;
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-12-18 04:28:16

graphql为随时重新查询数据库提供了精确的refetch支持。只需将其作为道具传递给子组件,并在单击刷新按钮时调用该函数。请参阅文档:https://www.apollographql.com/docs/react/essentials/queries.html#refetching

票数 1
EN

Stack Overflow用户

发布于 2018-12-18 04:24:42

尝试将graphQL数据存储为组件的状态。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53822446

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档