reactjs - 重新渲染组件 React 表

Question

我正在尝试重新渲染组件。我有一个刷新按钮，我想在单击时清除所有过滤器和排序值。问题是我无法重新渲染，即使使用 forceUpdate()，它什么也没做，我不知道为什么。另外，我尝试了 setState()，但什么也没有。我想要发生的是当我更改页面时会发生什么，它会重新呈现组件。请问有人可以帮助我吗？我究竟做错了什么？

import React, { Component } from "react";
import DeleteComponent from "../components/DeleteComponent"
import ReactTable from 'react-table';
import { Link, withRouter } from 'react-router-dom';
import axios from "axios";
import { getJwt } from '../helpers/jwt'
import eye from '../img/eye.png'
import bin from '../img/bin.png'
import writing from '../img/writing.png'


class CustomReactTable extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: [],
      showDelete: false,
      item: null,
      pages: null,
      totalItems: null,
      loading: false,
      state: {},
    }
  }

  fetchData = (state) => {
    this.setState({ state: state })
    const jwt = getJwt()
    if (!jwt) {
      this.props.history.push('/login')
    }

    let config = {
      headers: { 'Authorization': `Bearer ${jwt}` },
      params: {
        page: state.page,
        pageSize: state.pageSize,
        sorted: state.sorted,
        filtered: state.filtered
      }
    }
    this.setState({ loading: true })

    axios.get(`http://localhost:3001/api/v1${this.props.location.pathname}`, config)
      .then(response => {
        console.log(response)
        this.setState({
          data: response.data.result,
          loading: false
        })
      })

    axios.get(`http://localhost:3001/api/v1${this.props.location.pathname}/count-documents`, config)
      .then(response => {
        this.setState({
          totalItems: response.data.result,
          pages: Math.ceil(response.data.result / state.pageSize)
        })
      })
  }

  loadOptions = () => {
    this.props.columns.push({
      Header: "",
      Cell: (row) => [
        // Find a better way to add unique key
        <Link to={`${this.props.location.pathname}/${row.original._id}/show`} key={row.original._id} params={{ id: row.original._id }}><button className="btn-xs btn-outline-light"><img style={{ width: '1em' }} src={eye} /></button></Link>,
        <Link to={`${this.props.location.pathname}/${row.original._id}/edit`} key={row.original._id + 'a'}><button className="btn-xs btn-outline-light"><img style={{ width: '1em' }} src={writing} /></button></Link>,
        <button key={row.original._id + 'b'} className="btn-xs btn-outline-light" onClick={() => { this.onClickDeleteButton(row.original._id) }}><img style={{ width: '1em' }} src={bin} /></button>
      ]
    })
  }

  loadFunctionalities = () => {
    return (
      <div className='functionalities-react-table'>
        <span className='functionalities-add-item-table'>
          <Link to={`${this.props.location.pathname}/add`}><button className="btn-sm btn-outline-success">Add new {this.props.modelName}</button></Link>
        </span>
        <span className='functionalities-refresh-table'>
          <button className="btn-sm btn-outline-dark">Refresh table</button>
        </span>
      </div>
    )
  }

  onClickDeleteButton = (id) => {
    this.setState({ showDelete: true, item: id })
  }

  onCancelDeleteClick = () => {
    this.setState({ showDelete: false })
  }

  componentDidMount() {
    this.loadOptions()
  }

  reloadData = () => {
    this.fetchData(this.state.state)
  }

  render() {
    return (
      <div className='main-content'>
        {this.state.showDelete && (
          <DeleteComponent reloadData={this.reloadData} onCancelDeleteClick={this.onCancelDeleteClick} item={this.state.item} />
        )}
        <h3>{`${this.props.modelName} (${this.state.totalItems})`}</h3>
        {this.loadFunctionalities()}
        <ReactTable
          data={this.state.data}
          columns={this.props.columns}
          manual
          onFetchData={this.fetchData}
          defaultPageSize={10}
          pages={this.state.pages}
          style={{ fontSize: '0.9em' }}
        >
        </ReactTable>
        <div className="total-records-tag">{this.props.modelName}: {this.state.totalItems}</div>
      </div >
    )
  }
}

export default withRouter(CustomReactTable);

标签： reactjsreact-tablereact-componentrerender