Question

有没有办法使用React-Table手动触发onFetchData回调。

在文档中我可以找到服务器端部分，说明在componentDidMount中调用了onFetchData，并且在表中更改了分页，分页或过滤。

问题是：我可以手动触发onFetchData回调（它应该在其他独立道具更改时更新）吗？

Answer 1

您可以在父组件中保留对表的引用：

render( ... <ReactTable ref={(refReactTable) => {this.refReactTable = refReactTable;}}... /> ...

然后从父级激发更新，如下所示：

this.refReactTable.fireFetchData()

Answer 2

添加引用以反应表
为onFetchData创建一个函数，该函数接收表“ state”，该函数将调用您的数据并设置数据和分页等。
在编辑后从ref.current.state获取状态并用其调用获取函数，获取调用中的状态更新保证返回将更新表，就像它调用onFetchData本身一样。

    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        this.table = React.createRef();
        this.fetch = this.fetch.bind(this);
      }
      render() {
        return <ReactTable
           ref={this.table}
           onFetchData={this.fetch}
           ...
        />;
      }
      fetch(state){
        // make call -> then update state
      }
      onFinishedEditOrDelete(){
         this.fetch(this.table.current.state);
      }
    }

Answer 3

就算有人仍在寻找实现此目的的方法，我也可以使用钩子来实现。您需要引用ReactTable组件，然后调用.fireFetchData()来重新获取服务器数据：

const Table = ({ columns, ...props }) => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  const reactTable = useRef();

  useEffect(() => {
    reactTable.current && reactTable.current.fireFetchData();
  }, [/* your variable(s) here*/]);

  return (
    <ReactTable
      ref={reactTable}
      data={data}
      loading={loading}
      columns={columns}
      manual
      onFetchData={(state, instance) => {
        setLoading(true);
        // ... fetchData
        setData(data);
        setLoading(false);
      }}
      {...props}
    />
  );
};

一种在ReactTable中触发onFetchData的方法

3 个答案: