-
-
Notifications
You must be signed in to change notification settings - Fork 3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Force React-table to reload #955
Comments
React refreshes based on properties on the component changing. If you are using |
@gary-menzel Thanks for your answer, but it's not solving the problem. Maybe I didn't explain the problem the correctly. I have a custom component which wrappe a ReactTable component. React-Table is to retrieve my data on database in the backend. The problem is, upon successful add of an object, the component ReactTable becomes outdated and does not refresh, even though I change the state of my custom component. My apologies for not being clear enough on the first post and thank you for your time. :) |
If you search these github issues you will see that many people have asked for a "refresh" function - and there is not going to be one added because it just isn't the way React works. It's not the state of your custom component that needs to change - it is the properties that are being used by ReactTable. So, to get the Even more so, ReactTable stretches those concepts even further (so if it is your first project, trying to get ReactTable to work like other JS packages you may have used with something like jQuery will be a challenge and you'll just have to work through it until you "get it" - no shortcuts). Finally, everyone coming from that "call a function to do something" approach wants to use The codesandbox you supplied doesn't actually work (it gets compilation errors) so I was unable to see what your component architecture looks like. Feel free to post a "working" (aside from the problem you described) replacement. |
Thank you, I was missing one point in React, the re render does not take effect on child components unless state changing. Thank you for explaining this to me, now it works, following your instructions: when the creation succeed, I call my database to read the new object and manually add it to the I was talking about the Thank you again for the great support. |
Correct me if I am wrong. I think this only works when the length of |
|
@gary-menzel, earlier in this thread you responded with this:
In my case I'm using redux for my data so I'm using this.props. vs this.state. In my testing it seems to make no difference which I use, but I'm having an issue where the state in ReactTable component is not updated... I'm using redux to store multiple "views" of logging data, each view also stores the filtered object from table state based on what filters, if any are selected when that view is selected. If there are no filters set, filtered = []. When I render ReactTable, I pass this.props.filtered (from redux mapStatetoProps) in via filtered and defaultFiltered props so the table renders with the filters for that view. The problem I'm having is that if I have a view that DOES have filters (table state.filtered NOT empty), then I create a new view that has filtered = [], the next render still shows the filters of the last view, which I consider "stale". The new data is displayed as expected, it's just the filters from the last view displayed. Any thoughts on why that is, and how I can assure the new view/filtered object are reflected in the next render? Thanks in advance, Paul |
@gary-menzel I do agree that in react it is expected that a refresh only happens when the props change. But the thing is even that is not enough for the Let's consider:
Now, just following your logic, it would be enough to say:
But that isn't enough to force a refresh. You actually need to ...
And while I can understand it from a technical point of view. Yes, I can imagine why it's supposed to be like that. But let's document it somewhere. |
react-table owns state and hides it from us. thus, we can't simply "pass new data in" to get a refresh. my new data is a function of react-table's managed state. thus, we at least need to some mechanism or prop to pass down into react-table to have it trigger it's data retrieval workflow. e.g. |
This state will be 💯% accessible, controllable and exposed in the next
major version of RT.
…On Sat, Jan 5, 2019 at 5:16 PM Christopher Dieringer < ***@***.***> wrote:
again, react-table owns state and hides it from us. thus, we can't simply
"pass new data in" to get a refresh. *my new data is a function of
react-table's managed state*.
thus, we at least need to some mechanism or prop to pass down into
react-table to have it trigger it's data retrieval workflow. e.g. <ReactTable
isDataStale />. such a prop being set perhaps kicks off onFetchData once,
until that prop is cleared?
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
<#955 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AFUmCbhvw29osxI8JO-fB-vypBzA1oqhks5vAUBUgaJpZM4T2RNL>
.
|
@tannerlinsley is this accessible on master now? |
This answer is only satisfactory if you happen to have the data entity that was saved to your data store. If you made a POST call to a server, and it saves data, and that data is manipulated on the back end, you need to be able to update the table with the new field from the store. If you are using the onFetchData functionality, you have no way of forcing the table to call that function without artificially setting some state data to manipulate the react elements. You can't separate the data call function from the table, because then you will not have the tables state and instance data that it passes to onFetchData. The concept that this control does not need a refresh because "that's not how React works" is just false. |
You are fast! |
OK, here it is for V6:
|
@cfalone Thank you so much for this. A complementary piece to this that was helpful for me was that setState has a 2nd argument for a callback function to ensure that the fetch() call happens after the state change (if there are elements to your state that affect your fetch query). So you can do: this.setState({whatever state change}, this.fetch(this.table.current.state)); |
Legend! Wish I found this post about 7 hours ago!! |
Man, you are a hero :D |
Any update on how to do this in v7. Looked through the docs and I'm not seeing anything... |
Been using redux and had the same issue, to force update of the component and to trick it that new set of data is being retrieved (get around the referential checks) I have resorted to recreating the data array by simply using JSON.parse() and JSON.stringify() before passing it to the action.
For now it works, really wishing to have a more decent way to force the reload/refresh. |
@tannerlinsley , could you please refer to the change the was made in v7? I'm having this issue in today (Nov 2021) and would love to update my pattern to the legit way :) |
please reopen this issue |
It's very easy to get into chicken and egg situations with filters or preselected rows from previous data. |
What version of React-Table are you using?
6.8.0
What bug are you experiencing, or what feature are you proposing?
I'd like to be able to force the Component to reload so the 'onFetchData' handler would trigger again, or be able to reuse the function implemented inside the 'onFetchData'.
The context is that I have a function that add a new object in my data base, which should appear in the table, but it needs to update to do so. I can't just insert it my state.data since my backend alter the object.
It's my first project with React, maybe I'm missing a simple concept.
Use https://codesandbox.io/s/X6npLXPRW (by clicking the "Fork" button) to reproduce the issue.
https://codesandbox.io/s/olo47vwo89
Thank you for your time
The text was updated successfully, but these errors were encountered: