score:209
Use the extraData
property on your FlatList component.
As the documentation states:
By passing
extraData={this.state}
toFlatList
we make sureFlatList
will re-render itself when thestate.selected
changes. Without setting this prop,FlatList
would not know it needs to re-render any items because it is also aPureComponent
and the prop comparison will not show any changes.
score:-1
Just use:
onRefresh={true}
inside your flatList
component.
score:-1
Flatlist's extraData wasn't working for me and I happened to be using a prop from redux. This sounded similar to issues from the comments in ED209's answer. I ended up manually calling setState when I receive the prop.
componentWillReceiveProps(nextProps: StateProps) {
if (this.props.yourProp != null && nextProps.yourProp) {
this.setState({ yourState: processProp(nextProps.yourProp) });
}
}
<FlatList
data={this.state.yourState}
extraData={this.state.yourState}
/>
For those of you using > React 17 use getDerivedStateFromProps
score:0
I have replaced FlatList
with SectionList
and it is updates properly on state change.
<SectionList
keyExtractor={(item) => item.entry.entryId}
sections={section}
renderItem={this.renderEntries.bind(this)}
renderSectionHeader={() => null}
/>
The only thing need to keep in mind is that section
have diff structure:
const section = [{
id: 0,
data: this.state.data,
}]
score:0
For me, the trick was extraData and drilling down into the item component one more time
state = {
uniqueValue: 0
}
<FlatList
keyExtractor={(item, index) => item + index}
data={this.props.photos}
renderItem={this.renderItem}
ItemSeparatorComponent={this.renderSeparator}
/>
renderItem = (item) => {
if(item.item.selected) {
return ( <Button onPress={this.itemPressed.bind(this, item)}>Selected</Button> );
}
return ( <Button onPress={this.itemPressed.bind(this, item)}>Not selected</Button>);
}
itemPressed (item) {
this.props.photos.map((img, i) => {
if(i === item.index) {
if(img['selected') {
delete img.selected;
} else {
img['selected'] = true;
}
this.setState({ uniqueValue: this.state.uniqueValue +1 });
}
}
}
score:0
Put variables that will be changed by your interaction at extraData
You can be creative.
For example if you are dealing with a changing list with checkboxes on them.
<FlatList
data={this.state.data.items}
extraData={this.state.data.items.length * (this.state.data.done.length + 1) }
renderItem={({item}) => <View>
score:0
If we want the FlatList to know the data change both prop and state,we can construct an object referencing both prop and state and refresh the flatlist.
const hasPropOrStateChange = { propKeyToWatch: this.props, ...this.state};
<FlatList data={...} extraData={this.hasPropOrStateChange} .../>
Docs: https://facebook.github.io/react-native/docs/flatlist#extradata
score:0
In react-native-flatlist, they are a property called as extraData. add the below line to your flatlist.
<FlatList
data={data }
style={FlatListstyles}
extraData={this.state}
renderItem={this._renderItem}
/>
score:0
I am using functional component, in that I am using Flatlist with redux data. I am managing all the state with Redux store. Here is the solution to update the Flatlist data after the api call.
I was first doing like this:-
const DATA = useSelector((state) => state.address.address);
<FlatList
style = {styles.myAddressList}
data = {DATA}
renderItem = {renderItem}
keyExtractor = {item => item._id}
ListEmptyComponent = {EmptyList}
ItemSeparatorComponent={SeparatorWhite}
extraData = {refresh}
/>
but the data was not re-rendering my Flatlist data at all.
As a solution I did like given Below:-
<FlatList
style = {styles.myAddressList}
data = {useSelector((state) => state.address.address)}
renderItem = {renderItem}
keyExtractor = {item => item._id}
ListEmptyComponent = {EmptyList}
ItemSeparatorComponent={SeparatorWhite}
/>
I am passing the Redux state directly to the Flatlist Datasource rather than allocating it to the variable.
Thank you.
score:0
const [itemSelected, setItemSelected] = setState(null);
....
const FlatListItem = (item) => {
return (
<TouchableOpacity onPress={() => setItemSelected(item.id)}>
<View style={ (itemSelected === item.id) ? style.itemWrapperActive : style.itemWrapper }>
<Text>{ item.label }</Text>
</View>
</TouchableOpacity>
)
}
....
<FlatList
ItemSeparatorComponent={() => <View style={{ width: 20 }} />}
data={ flatListData }
renderItem={ ({item}) => FlatListItem(item) }
keyExtractor={ (item) => item.id }
extraData={ itemSelected }
/>
score:0
For those using redux, I used extraData
prop and added loading there what I also did was I created a custom hook called usePrevious
import {useEffect, useRef} from 'react';
export const usePrevious = <T>(value: T): T | undefined => {
const ref = useRef<T>();
useEffect(() => {
ref.current = value;
});
return ref.current;
};
and used it like this on my Item.
const prevData = usePrevious({data});
//CODES...
useEffect(() => {
if (prevData?.data === undefined) {
return;
}
if (prevData?.data?.someID !== data?.someId) {
// do something.
showSubChildren(false)
}
}, [data?.AuctionName, prevData, resetItemStates]);
So what basically happened here was, your item will check if data is from undefined
(first time). Then It will check if some data property has changed and if it has, you should do something.
score:0
Doing like below will instantly make the flatlist item change reflected instantly. You can do this similarly in component also if you are not using redux.
let list = Object.assign([], state.auctionList);
let objIndex;
//Find index of specific object using findIndex method.
objIndex = list.findIndex(
obj => obj.auction_vehicles.vehicle_id == payload.vehicle_id,
);
// //Update object's property.
list[objIndex].auction_vehicles.time_left = payload.offer_expiry_time;
list[objIndex].auction_vehicles.starting_price = payload.amount;
list[objIndex].auction_vehicles.bidding_status =
payload.highest_bidder_flag;
return { ...state, auctionList: list };
score:1
I solved this problem by adding extraData={this.state}
Please check code below for more detail
render() {
return (
<View style={styles.container}>
<FlatList
data={this.state.arr}
extraData={this.state}
renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
/>
</View>
);
}
score:1
In this example, to force a re-render, just change the variable machine
const [selected, setSelected] = useState(machine)
useEffect(() => {
setSelected(machine)
}, [machine])
score:3
Just an extension on the previous answers here. Two parts to ensure, Make sure that you add in extraData and that your keyExtractor is unique. If your keyExtractor is constant a rerender will not be triggered.
<FlatList
data={this.state.AllArray}
extraData={this.state.refresh}
renderItem={({ item,index })=>this.renderPhoto(item,index)}
keyExtractor={item => item.id}
>
</FlatList>
score:4
If you are going to have a Button, you can update the data with a setState inside the onPress. SetState will then re-render your FlatList.
score:5
after lots of searching and looking for real answer finally i got the answer which i think it is the best :
<FlatList
data={this.state.data}
renderItem={this.renderItem}
ListHeaderComponent={this.renderHeader}
ListFooterComponent={this.renderFooter}
ItemSeparatorComponent={this.renderSeparator}
refreshing={this.state.refreshing}
onRefresh={this.handleRefresh}
onEndReached={this.handleLoadMore}
onEndReachedThreshold={1}
extraData={this.state.data}
removeClippedSubviews={true}
**keyExtractor={ (item, index) => index }**
/>
.....
my main problem was (KeyExtractor) i was not using it like this . not working : keyExtractor={ (item) => item.ID} after i changed to this it worked like charm i hope this helps someone.
score:8
OK.I just found out that if we want the FlatList to know the data change outside of the data prop,we need set it to extraData, so I do it like this now:
<FlatList data={...} extraData={this.state} .../>
refer to : https://facebook.github.io/react-native/docs/flatlist#extradata
score:22
Oh that's easy, just use extraData
You see the way extra data works behind the scenes is the FlatList or the VirtualisedList just checks wether that object has changed via a normal onComponentWillReceiveProps
method.
So all you have to do is make sure you give something that changes to the extraData
.
Here's what I do:
I'm using immutable.js so all I do is I pass a Map (immutable object) that contains whatever I want to watch.
<FlatList
data={this.state.calendarMonths}
extraData={Map({
foo: this.props.foo,
bar: this.props.bar
})}
renderItem={({ item })=>((
<CustomComponentRow
item={item}
foo={this.props.foo}
bar={this.props.bar}
/>
))}
/>
In that way, when this.props.foo
or this.props.bar
change, our CustomComponentRow
will update, because the immutable object will be a different one than the previous.
score:65
For quick and simple solution Try:
set extra data to a boolean value.
extraData={this.state.refresh}
Toggle the value of boolean state when you want to re-render/refresh list
this.setState({ refresh: !this.state.refresh })
Source: stackoverflow.com
Related Query
- How to render AdMob banner in React Flatlist between items?
- How to loop and render elements in React.js without an array of objects to map?
- How to render react components by using map and join?
- How to create dynamic href in react render function?
- How to render a multi-line text string in React
- How to render an array of objects in React?
- How can I render repeating React elements?
- How do I render sibling elements without wrapping them in a parent tag?
- How to Call a Function inside a Render in React/Jsx
- How can I render HTML from another file in a React component?
- How do I render Markdown from a React component?
- How do you make the ListHeaderComponent of a React Native FlatList sticky?
- React JSX, how to render text with a single quote? Example <p>I've</p>
- How to render rectangles in a D3 grouped bar chart using React Faux DOM?
- How to focus something on next render with React Hooks
- how to render child components in react.js recursively
- React: how to load and render external html file?
- How to safely render html in react?
- How to render a HTML comment in React?
- How to wait for AJAX response and only after that render the component?
- React.js How to render component inside component?
- How to avoid bind or inline arrow functions inside render method
- How to async await in react render function?
- How to get the data from React Context Consumer outside the render
- Facebook React.js: how do you render stateful components on the server?
- React, how to access the DOM element in my render function from the same component
- How to render (print) JSX as String?
- How to create two columns with space beetwen in react native - flatList
- How to keep scroll position using flatlist when navigating back in react native ?
- How to dynamically import SVG and render it inline
More Query from same tag
- How can I take a values of one object and put them into another object
- filter item by id using react router return empty array
- How to move Carousel both vertically and horizontally(nested) with react-responsive-carousel
- How can I show error message from API to the end-user?
- When migrating from Javascript to Typescript, how do you determine datatypes?
- React Context: Sessionstorage data in developer tools appears but appears blank in navbar
- React-redux: User Information not getting stored in redux after login
- Get update from external json value without full page refresh
- Error: Request failed with status code 405
- How to call Auth0 loginWithRedirect function in React useEffect without button clicking?
- How can I maintain the datagrid checkbox of the material ui in local storage?
- Why react component can re-render when redux reducer do not return a new array?
- What is the pattern for ensuring a user action triggers a Recoil state update in a Jest test
- Dispatch action on Auth0's lock.on('authenticated') event
- How can I make a React "If" component that acts like a real "if" in Typescript?
- MapDispatchToProps include all actions
- Child route handled by the same parent's component using react router
- Append child element in full calendar api using eventRender?
- Navigation ul tag binding error in ReactJs
- How to use import this npm package?
- Auto Scroll Horizontal Mui TabList on Drag with react-beautiful-dnd
- Reactfire, aren't mixins deprecated?
- React Redux dispatch syntax
- Create new key-value pairs using useContext and useReducer in React
- How do you write Jest tests for getInitialProps?
- React typescript error: Element implicitly has an 'any' type
- React Materialize Change input type from "password" to "new-password"
- How to enable manual value text input in custom increment-decrement field in REACT.js
- Material-UI: Cannot Trigger the onChangeCommitted Event During Testing
- In reactjs, how do I distribute components horizontally across an encompassing div?