Flatlist render error: Cannot read property 'getItem' of undefined #36828
Description
Description
I have been working on project which has several flatlists, which are causing problem suddenly. All flatlists that I have shows same issue dispite they were working previously. To add, auto refreshing also stopped working I dont know they are related to each other or not.
React Native Version
0.71.3
Output of npx react-native info
System:
OS: Windows 10 10.0.19044
CPU: (8) x64 Intel(R) Core(TM) i3-10105 CPU @ 3.70GHz
Memory: 5.21 GB / 15.87 GB
Binaries:
Node: 18.15.0 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 9.5.0 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK:
API Levels: 28, 31, 33
Build Tools: 28.0.3, 30.0.3, 31.0.0, 33.0.0
System Images: android-28 | Google APIs Intel x86 Atom, android-31 | Intel x86 Atom_64, android-31 | Google Play Intel x86 Atom_64, android-33 | Google APIs Intel x86_64 Atom
Android NDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: AI-213.7172.25.2113.9123335
Visual Studio: Not Found
Languages:
Java: 11.0.18
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.3 => 0.71.3
react-native-windows: Not Found
npmGlobalPackages:
react-native: Not Found
Steps to reproduce
Steps to reproduce:
Open the project and navigate to the screen where the flatlists are being used.
Observe that all the flatlists are not rendering and showing an error.
Check the console for any error messages related to the flatlists.
Look for the specific error message "Cannot read property 'getItem' of undefined".
Verify that this error is being displayed for all the flatlists on the screen.
Check if the code for the flatlists has been modified recently or if any libraries have been updated.
Verify that the data source for the flatlists is correctly defined and passed as props.
Make sure that the flatlist component is imported and rendered properly in the code.
Check if any other component or library is conflicting with the flatlists.
Provide any additional information that might be helpful for developers to identify and fix the issue.
Expected outcome:
The flatlists should render without any errors.
Actual outcome:
The flatlists are not rendering and showing the error message "Cannot read property 'getItem' of undefined".
Snack, code example, screenshot, or link to a repository
// CODE IS GIVEN BELOW IS EXAMPLE WHICH WORKS ON BRAND NEW PROJECT BUT NOT IN THE CURRENTLY USED ONE
import React, {useState} from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
Platform,
View,
FlatList,
} from 'react-native';
import {COLORS} from '../constants/theme';
const DATA = [
{id: '1', title: 'Item 1'},
{id: '2', title: 'Item 2'},
{id: '3', title: 'Item 3'},
{id: '4', title: 'Item 4'},
{id: '5', title: 'Item 5'},
{id: '6', title: 'Item 6'},
{id: '7', title: 'Item 7'},
];
const Item = ({title}) => (
{title}
);
const Settings = () => {
const [selectedId, setSelectedId] = useState(null);
const renderItem = ({item}) => ;
return (
<FlatList
horizontal
showsHorizontalScrollIndicator={false}
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
extraData={selectedId}
/>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 50,
},
item: {
backgroundColor: COLORS.primary,
padding: 5,
borderRadius: 20,
marginHorizontal: 5,
height: 50,
justifyContent: 'center',
alignItems: 'center',
},
title: {
fontSize: 22,
color: 'white',
},
});
export default Settings;