Skip to content
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

FlatList Error #34783

Closed
JonhsonFu opened this issue Sep 26, 2022 · 20 comments
Closed

FlatList Error #34783

JonhsonFu opened this issue Sep 26, 2022 · 20 comments
Labels
Component: FlatList Needs: Triage 🔍 Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@JonhsonFu
Copy link

Description

When I navigate to the page which has FlatList,it will send the error "TypeError: undefined is not an object (evaluating 'props.getItem')",I have no idea,help!!!
image
image
image
And I checked my babel.config.js ,it's without "@babel/plugin-proposal-class-properties",but in my yarn.lock,it's came to my dependencies.
image
image

Version

0.66.0

Output of npx react-native info

image

image

Steps to reproduce

just goto the page which used FlatList

Snack, code example, screenshot, or link to a repository

image

@SectionTN
Copy link

try
const renderItem = ({item}) => ....
....
renderItem={renderItem(item)}

@JonhsonFu
Copy link
Author

try const renderItem = ({item}) => .... .... renderItem={renderItem(item)}

I tried, it didn't work; I have written before that this is OK, maybe it is my environment problem, I am going to create a new project to try this component

@JonhsonFu
Copy link
Author

After I recreated the project, this component is fine, but the props are undefined in my current project
企业微信截图_44d0ef06-d5e1-43ce-9b9f-d2ce758fc4c0

@leepowellnbs
Copy link

leepowellnbs commented Nov 11, 2022

Yep, getting the same error, you can use patch-package to add this.props = props to the constructor, which should give you a temp workaround, for some reason calling super(props) doesn't seem to set the props to the instance.

constructor(props: Props<ItemT>) {
     super(props);
+    this.props = props;
     this._checkProps(this.props);
     if (this.props.viewabilityConfigCallbackPairs) {
       this._virtualizedListPairs =

@Emptyuu
Copy link

Emptyuu commented Jan 19, 2023

I also met the same problem. Have you found a more appropriate solution...

@DanielT777
Copy link

DanielT777 commented Jan 21, 2023

I also met the same problem. Have you found a more appropriate solution...

Same here

Using: "expo": "~47.0.12",
IOS and Android

@sidekick-richard
Copy link

sidekick-richard commented Feb 3, 2023

@babel/plugin-proposal-private-methods in babel.config.js was the culprit in my case. removing it, running yarn start --reset-cache and then running the app worked for me.
source: https://stackoverflow.com/questions/69922302/react-native-flatlist-undefined-is-not-an-object-evaluating-props-getitem

@Puyodead1
Copy link

Yep, getting the same error, you can use patch-package to add this.props = props to the constructor, which should give you a temp workaround, for some reason calling super(props) doesn't seem to set the props to the instance.

constructor(props: Props<ItemT>) {
     super(props);
+    this.props = props;
     this._checkProps(this.props);
     if (this.props.viewabilityConfigCallbackPairs) {
       this._virtualizedListPairs =

Thank you, this worked for me.

@1mike12
Copy link
Contributor

1mike12 commented Mar 10, 2023

Even something as simple as this component results in an Error.

import React from "react"
import { FlatList, Text } from "react-native"

export default function HomeScreen() {
  return (
    <FlatList
      data={[
        { title: "one", id: "1" },
        { title: "two", id: "2" }
      ]}
      renderItem={({ item }) => {
        return <Text key={item.id}>{item.title}</Text>
      }}
      keyExtractor={(item) => item.id}
    />
  )
}
TypeError: Cannot read property 'getItem' of undefined

This error is located at:
    in FlatList (created by HomeScreen)
    in HomeScreen (created by SceneView)

image

So for some reason it seems like the props are not being passed at all here

@nithronium
Copy link

Even something as simple as this component results in an Error.

import React from "react"
import { FlatList, Text } from "react-native"

export default function HomeScreen() {
  return (
    <FlatList
      data={[
        { title: "one", id: "1" },
        { title: "two", id: "2" }
      ]}
      renderItem={({ item }) => {
        return <Text key={item.id}>{item.title}</Text>
      }}
      keyExtractor={(item) => item.id}
    />
  )
}
TypeError: Cannot read property 'getItem' of undefined

This error is located at:
    in FlatList (created by HomeScreen)
    in HomeScreen (created by SceneView)
image

So for some reason it seems like the props are not being passed at all here

This became a nightmare for me at this point. A few days ago perfectly working app now stopped working without changing ANYTHING. It's literally the same code base, all I did was to close the emulator and code editor (not even the PC is restarted) and work on some other project for two days and come back and my apps were stuck on loading because of this error (App was already running fine)

So I close the terminals and re-run with npx react-native run-android and this appears. I don't know what happened. It seems to me the super(props) is not working but no idea why.

@nithronium
Copy link

Fixed the issue,

Simply remove @babel/plugin-proposal-class-properties from the babel.config.js's plugins section.

Then run npx react-native start --reset-cache

Error will disappear.

@ss1290
Copy link

ss1290 commented Mar 28, 2023

Even something as simple as this component results in an Error.

import React from "react"
import { FlatList, Text } from "react-native"

export default function HomeScreen() {
  return (
    <FlatList
      data={[
        { title: "one", id: "1" },
        { title: "two", id: "2" }
      ]}
      renderItem={({ item }) => {
        return <Text key={item.id}>{item.title}</Text>
      }}
      keyExtractor={(item) => item.id}
    />
  )
}
TypeError: Cannot read property 'getItem' of undefined

This error is located at:
    in FlatList (created by HomeScreen)
    in HomeScreen (created by SceneView)
image

So for some reason it seems like the props are not being passed at all here

Are you able to solve the issue ? I am facing the same issue

@ss1290
Copy link

ss1290 commented Mar 28, 2023

Even something as simple as this component results in an Error.

import React from "react"
import { FlatList, Text } from "react-native"

export default function HomeScreen() {
  return (
    <FlatList
      data={[
        { title: "one", id: "1" },
        { title: "two", id: "2" }
      ]}
      renderItem={({ item }) => {
        return <Text key={item.id}>{item.title}</Text>
      }}
      keyExtractor={(item) => item.id}
    />
  )
}
TypeError: Cannot read property 'getItem' of undefined

This error is located at:
    in FlatList (created by HomeScreen)
    in HomeScreen (created by SceneView)
image So for some reason it seems like the props are not being passed at all here https://github.com/facebook/react-native/blob/48c7adc3bf574c6d592e9d1c1c4bd266f88063f7/Libraries/Lists/FlatList.js#L480

This became a nightmare for me at this point. A few days ago perfectly working app now stopped working without changing ANYTHING. It's literally the same code base, all I did was to close the emulator and code editor (not even the PC is restarted) and work on some other project for two days and come back and my apps were stuck on loading because of this error (App was already running fine)

So I close the terminals and re-run with npx react-native run-android and this appears. I don't know what happened. It seems to me the super(props) is not working but no idea why.

Are you able to solve the issue ? I am facing the same issue

@Sonu7759
Copy link

Description

When I navigate to the page which has FlatList,it will send the error "TypeError: undefined is not an object (evaluating 'props.getItem')",I have no idea,help!!! image image image And I checked my babel.config.js ,it's without "@babel/plugin-proposal-class-properties",but in my yarn.lock,it's came to my dependencies. image image

Version

0.66.0

Output of npx react-native info

image image

Steps to reproduce

just goto the page which used FlatList

Snack, code example, screenshot, or link to a repository

image

are you able to solve the problem

@uhgenie7
Copy link

Fixed the issue,

Simply remove @babel/plugin-proposal-class-properties from the babel.config.js's plugins section.

Then run npx react-native start --reset-cache

Error will disappear.

Thank you, this worked for me. Importantly, must clear the cache.

@RamenSea
Copy link

RamenSea commented Sep 6, 2023

Fixed the issue,
Simply remove @babel/plugin-proposal-class-properties from the babel.config.js's plugins section.
Then run npx react-native start --reset-cache
Error will disappear.

Thank you, this worked for me. Importantly, must clear the cache.

This doesn't work for those of us who need that babel plugin.

@misha-pavlov
Copy link

Any solution for the case when I need babel plugin?

@dieguezz
Copy link
Contributor

dieguezz commented Feb 22, 2024

Another (less ugly) way of fixing it is by deleting line 311 where it sais props: Props<ItemT>;

You can make the change locally on node_modules/react-native/Libraries/Lists/FlatList.js and then add patch-package to fix it.

Just add "postinstall": "npx patch-package", in your package.json.

You will need the fix until you install 0.74-rc1

Can you confirm its working for you and close the issue @JonhsonFu ?

facebook-github-bot pushed a commit that referenced this issue Feb 22, 2024
Summary:
When using Flatlist on iOS and Android its failing because props are undefined

The problem is described on #34783

![Captura de pantalla 2024-02-22 a las 4 13 11](https://github.com/facebook/react-native/assets/1161455/325738d9-2e49-44a0-bb6a-077b2e02e9cd)

![Captura de pantalla 2024-02-22 a las 4 14 58](https://github.com/facebook/react-native/assets/1161455/118f76e1-a818-428e-938e-123b55536b49)

Fixed by setting constructor before any statement and removing unnecessary props declaration at the top of the class.

## Changelog:

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->
[GENERAL] [FIXED] - Fix undefined props crash in FlatList

Pull Request resolved: #43141

Reviewed By: javache

Differential Revision: D54069559

Pulled By: robhogan

fbshipit-source-id: b39cd9a273eb0279ed353f9efcb66a3c4ccf93b4
cortinico pushed a commit that referenced this issue Feb 26, 2024
Summary:
When using Flatlist on iOS and Android its failing because props are undefined

The problem is described on #34783

![Captura de pantalla 2024-02-22 a las 4 13 11](https://github.com/facebook/react-native/assets/1161455/325738d9-2e49-44a0-bb6a-077b2e02e9cd)

![Captura de pantalla 2024-02-22 a las 4 14 58](https://github.com/facebook/react-native/assets/1161455/118f76e1-a818-428e-938e-123b55536b49)

Fixed by setting constructor before any statement and removing unnecessary props declaration at the top of the class.

## Changelog:

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->
[GENERAL] [FIXED] - Fix undefined props crash in FlatList

Pull Request resolved: #43141

Reviewed By: javache

Differential Revision: D54069559

Pulled By: robhogan

fbshipit-source-id: b39cd9a273eb0279ed353f9efcb66a3c4ccf93b4
okwasniewski pushed a commit to okwasniewski/react-native that referenced this issue Mar 5, 2024
Summary:
When using Flatlist on iOS and Android its failing because props are undefined

The problem is described on facebook#34783

![Captura de pantalla 2024-02-22 a las 4 13 11](https://github.com/facebook/react-native/assets/1161455/325738d9-2e49-44a0-bb6a-077b2e02e9cd)

![Captura de pantalla 2024-02-22 a las 4 14 58](https://github.com/facebook/react-native/assets/1161455/118f76e1-a818-428e-938e-123b55536b49)

Fixed by setting constructor before any statement and removing unnecessary props declaration at the top of the class.

## Changelog:

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->
[GENERAL] [FIXED] - Fix undefined props crash in FlatList

Pull Request resolved: facebook#43141

Reviewed By: javache

Differential Revision: D54069559

Pulled By: robhogan

fbshipit-source-id: b39cd9a273eb0279ed353f9efcb66a3c4ccf93b4
@react-native-bot
Copy link
Collaborator

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

@react-native-bot react-native-bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Sep 10, 2024
@react-native-bot
Copy link
Collaborator

This issue was closed because it has been stalled for 7 days with no activity.

@react-native-bot react-native-bot closed this as not planned Won't fix, can't repro, duplicate, stale Sep 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: FlatList Needs: Triage 🔍 Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests

17 participants