Tuesday, February 23, 2021¶
I read the docs about PrimeReact’s DataTable:
The example uses axios. What’s that? Here a nice introduction:
Might be useful to play around with it. But not now.
I still don’t fully understand what’s a state in React.
A <DataTable> component needs at least a value attribute. And its children must be a <Column> components, one child per column).
Once more, npm asks me to upgrade, and I do it:
npm notice New patch version of npm available! 7.5.4 -> 7.5.6 npm notice Changelog: https://github.com/npm/cli/releases/tag/v7.5.6 npm notice Run npm install -g email@example.com to update! $ sudo npm install -g npm
I get this warning in my JS console:
Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
This warning is caused by the <DataProvider>, a component used by the <DashboardItems> component. The <DashboardItems> component has a dynamic list of children.
I guess that the warning means “When you start a polyfill request in componentDidMount(), then you should make sure to cancel it before the component gets unmounted.”
So how to cancel a polyfill request? The whatwg-fetch docs has a section “Aborting requests”. Wow: “aborting a fetch requires use of two additional DOM APIs: AbortController and AbortSignal. … Consequently, you will need to include an additional polyfill for these APIs to abort fetches”. But the example seems to do what I want, so I integrated it in DataProvider.js (unlike the example I must create the abort controller during the component’s construct method, i.e. we have one such controller for every data provider…)
Funny: I got the warning “DataProvider has a method called componentDidUnmount(). But there is no such lifecycle method. Did you mean componentWillUnmount()?”, and the warning was right…
So this added a new dependency:
$ npm install yet-another-abortcontroller-polyfill --save
Yes, one warning less! So I understood the reason for a problem and managed to fix it. I guess that it wasn’t a huge problem, and my actual problem (#3981) is still there, but an encouraging experience nevertheless.
I discovered that the problem starts somewhere in