Comments (4)
Even if the fieldValuesFetch is not returned when text is small, the former fieldValuesFetch remains injected into the component
What do you mean by "remains injected into the component"? If I'm understanding correctly, isn't that what you'd want; otherwise, there would be nothing for the component to render.
I think it would be easier to provide an ability to "skip" / "ignore" a fetch conditionnally.
Probably the easiest thing to do would be to set comparison
to something like value.length > 2 && value
. This will make it false
unless it's longer than 2 characters and will skip fetching (because false === false
, not that false
is has some special meaning here).
from react-refetch.
- initially my component does not receive any
fieldValuesFetch
(PromiseState) prop - then I type text, and it receives
fieldValuesFetch
as soon as there is more than 3 chars - then I erase the text, and make the text empty, and the component still receive the
fieldValuesFetch
which actually contains the result of the last text that triggered the fetch
I'd like no NOT receive that prop when I make the text input empty again, because otherwise my autocomplete dropdown keeps showing former results when the input is empty. It looks to me the lib should do state cleanup when it detects that a fetch config has just been removed.
I'd like to never receive the fieldValuesFetch
prop when the input text length <= 2. Currently, this is not consistant and depends on former fetch results.
As expected, the following does not really do what I want:
const ConnectedCompanyField = connect(({ value }) => {
return {
fieldValuesFetch: {
comparison: value.length > 2 && value,
value: () => searchField(value, ProviderLabel),
},
};
})(CompanyField);
With this config the searchField
promise API still fires, it's just it will fire only once as long as the comparison remains false, which can lead to something even more dangerous: results being queried for a small texts of 2 chars, and results not changing when the 2 letters do change because comparison remains constant
from react-refetch.
Here is a basic code solution to add the behavior I want. I'd like to submit a proper PR if you agree with this behavior and the implementation:
const arrayDiff = function(a,b) {
return a.filter(function(i) {
return b.indexOf(i) < 0;
});
};
const omitKeys = function omitKeys(obj,keys) {
const { x, ...copy } = obj;
keys.forEach(key => delete copy[key]);
return copy
}
refetchDataFromMappings(mappings) {
mappings = coerceMappings(mappings)
Object.keys(mappings).forEach(prop => {
/// ... nothing here, keep the original code
})
// Do state cleanup on mapping removal
const removedMappingProps = arrayDiff(Object.keys(this.state.mappings),Object.keys(mappings));
// clear refresh timeouts before removal
if ( removedMappingProps.length ) {
removedMappingProps.forEach(prop => {
if (this.state.refreshTimeouts[prop]) {
window.clearTimeout(this.state.refreshTimeouts[prop]);
}
})
// remove prop mapping from state
this.setState({
mappings: omitKeys(this.state.mappings,removedMappingProps),
data: omitKeys(this.state.data,removedMappingProps),
startedAts: omitKeys(this.state.startedAts,removedMappingProps),
refreshTimeouts: omitKeys(this.state.refreshTimeouts,removedMappingProps),
});
}
}
from react-refetch.
Alternatively, could you just control this with a conditional value
. I haven't tried it, but I think this would clear the previous PromiseState
, or at least with an undefined value and skip the fetch:
comparison: value,
value: value.length < 2 ? undefined : () => searchField(value, ProviderLabel),
I'd rather not change the internals of the library for this since. Perhaps we could have some utility to help make this easier, but I don't think previously set state should "automagically" be cleared.
from react-refetch.
Related Issues (20)
- Identity requests meta does not have component HOT 1
- Accessing the response body in case of reject HOT 2
- Posting data and having it return as a promise HOT 5
- impossible to update my props into react-refetch HOT 1
- Update Lifecycle Hooks for Future Async Rendering HOT 3
- Doesn't support SSR HOT 5
- [idea] useRefetch HOT 5
- Refresh POST method request doesn' work HOT 1
- [Typescript] Type of "body" attribute must be string? and not object? on the Mapping interface
- Can you retry a failed request from within render? HOT 1
- Typings problem with PromiseStateMapping/FunctionMapping HOT 1
- Pass this.state.data to then(), catch(), andThen() and andCatch() functions for more powerful side effects HOT 2
- Override default behavior on failure of fetch with refreshInterval HOT 1
- Typescript types seem not to work properly HOT 9
- react 16.9, Warning: componentWillMount has been renamed, and is not recommended for use HOT 2
- Fetch rejected but reason empty HOT 2
- Example in README cannot be compiled in TypeScript HOT 1
- Is it possible to use a callback of a request? HOT 4
- Support for react@17 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-refetch.