My React Native application has a component that is supposed to show a scrollable list. I'm also using React Native Elements, although leaving that out doesn't seem to make a big difference.
My component looks like this:
export class MyComponent extends React.Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
this.state = { ds: ds.cloneWithRows(this.props.myItems) };
}
render() {
return (
<View>
<Text>Some text here</Text>
<List>
<ListView dataSource={ this.state.ds } renderRow={ renderRow } />
</List>
</View>
);
}
};
Where renderRow
is declared outside the class, since it doesn't need its state, as:
const renderRow = (rowData, sectionId) => {
return (
<ListItem
key={ sectionId }
title={ rowData.myProp }
subtitle={ rowData.myOtherProp }
/>
);
};
Besides, removing the <List>
with its children doesn't seem to make a difference, either.
From the logging (not included in the code, for brevity) I can see that the component constructor
runs without problems. The render
method isn't invoked, though. In adb logcat
output (I'm using the Android simulator) I see the following:
10-16 14:02:34.507 10161 10205 W ReactNativeJS: Possible Unhandled Promise Rejection (id: 0):
10-16 14:02:34.507 10161 10205 W ReactNativeJS: null is not an object (evaluating 'internalInstance.getHostNode')
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16594:24
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18320:35
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16594:36
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18320:35
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16594:36
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18320:35
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16594:36
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18320:35
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16594:36
10-16 14:02:34.507 10161 10205 W ReactNativeJS: updateChildren@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:17792:47
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _reconcilerUpdateChildren@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:17341:36
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _updateChildren@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:17445:48
10-16 14:02:34.507 10161 10205 W ReactNativeJS: updateChildren@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:17432:21
10-16 14:02:34.507 10161 10205 W ReactNativeJS: receiveComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:14715:20
10-16 14:02:34.507 10161 10205 W ReactNativeJS: receiveComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16656:34
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _updateRenderedComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18688:33
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _performComponentUpdate@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18658:30
10-16 14:02:34.507 10161 10205 W ReactNativeJS: updateComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18579:29
10-16 14:02:34.507 10161 10205 W ReactNativeJS: receiveComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18481:21
10-16 14:02:34.507 10161 10205 W ReactNativeJS: receiveComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16656:34
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _updateRenderedComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18688:33
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _performComponentUpdate@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18658:30
10-16 14:02:34.507 10161 10205 W ReactNativeJS: updateComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18579:29
10-16 14:02:34.507 10161 10205 W ReactNativeJS: receiveComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18481:21
10-16 14:02:34.507 10161 10205 W ReactNativeJS: receiveComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16656:34
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _updateRenderedComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18688:33
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _performComponentUpdate@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18658:30
10-16 14:02:34.507 10161 10205 W ReactNativeJS: updateComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18579:29
10-16 14:02:34.507 10161 10205 W ReactNativeJS: performUpdateIfNecessary@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18495:21
10-16 14:02:34.507 10161 10205 W ReactNativeJS: performUpdateIfNecessary@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16688:42
10-16 14:02:34.507 10161 10205 W ReactNativeJS: runBatchedUpdates@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16299:41
10-16 14:02:34.507 10161 10205 W ReactNativeJS: perform@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:17035:16
10-16 14:02:34.507 10161 10205 W ReactNativeJS: perform@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:17035:16
10-16 14:02:34.507 10161 10205 W ReactNativeJS: perform@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&m
10-16 14:02:34.527 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 17, pending 15)
10-16 14:02:34.800 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 21, pending 15)
10-16 14:02:34.801 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 22, pending 20)
10-16 14:02:34.905 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 26, pending 15)
10-16 14:02:34.908 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 27, pending 20)
10-16 14:02:35.191 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 31, pending 15)
10-16 14:02:35.191 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 32, pending 20)
10-16 14:02:35.192 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 33, pending 30)
I'm using
My question is two-fold: how can I troubleshoot what's going on (why is my render()
method not invoked, for instance) and what am I doing wrong here?
Turned out that the actual solution was not in the use of ListView
or List
. Some of the logging statements inside render()
caused the render()
method to fail - silently. RN then attempted to re-render the component, which caused the log message as shown in the question to continuously re-appear until the app was killed.
how can I troubleshoot what's going on (why is my render() method not invoked, for instance)
Use console.debug(msg)
or console.error(msg)
, etc to log messages in your code and then view your console logs by running on your terminal react-native log-android
for Android or react-native log-ios
for iOS, from your project folder.
what am I doing wrong here?
There are two problems in your code. First, the cloneRowsWithData
, as the documentation says, does NOT clone the data in this data source. It simply passes the functions defined at construction to a new data source with the data specified. Therefore, you need to assign the result of this function to another variable. Second, the state is an object. You define ds
but you leave it unassigned. So what you need to do is this:
constructor(props) {
super(props);
const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
this.state = { dataSource: ds.cloneWithRows(this.props.myItems) };
}
And then in your render()
change the ListView's dataSource
prop to:
dataSource={ this.state.dataSource }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With