Question

我正在尝试设置刷新按钮，以便最终用户创建新票证时，当我按刷新按钮时，我应该能够看到新创建的票证。我正在使用Apollo客户端从graphql服务器获取数据。我想知道我应该如何刷新尝试过forceUpdate和this.setState()的表，我通过将{Math.random()}放在render函数中来验证它可以工作，但是它不刷新也不提供新数据，尝试将刷新按钮放在button.js中，问题仍然存在。 window.location.reload()可以工作，但是那不是我想要的，有没有像任何生命周期挂钩一样可以做出反应的东西，我尝试过：

componentWillReceiveProps(nextProps) {
  if(this.props.ticket !== nextProps.ticket) {
     console.log(this.props.ticket)
  }
}

在table.js中，但没有成功，或者我不得不使用一些Apollo客户端API。请提出建议，谢谢。

App.js

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

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;

Answer 1

graphql提供了一个refetch道具，用于随时重新查询数据库。只是作为道具传递给您的子组件，然后在单击刷新按钮时调用该函数。参见文档： https://www.apollographql.com/docs/react/essentials/queries.html#refetching

Answer 2

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

React：单击按钮后如何刷新表中的数据

2 个答案: