React Native - ListView

2

Does the ReactNative ListView accept an array of arrays? I need to get the API data as follows:

[[{"userId":1,"userName":"Ricardo"},{"userId":1,"userName":"Ricardo"}],[{"userId":1,"userName":"Ricardo"},{"userId":1,"userName":"Ricardo"}]].

I made the following code to display it:

renderRowUsers(rowData, sectionID, rowID) {
     return rowData.map(function(user, i){
        return(
          <View key={i}>
            <Text>{user.userId}</Text>
            <View>
              <Text>{user.userName}</Text>
            </View>
          </View>
        );
    });
}

and

const usersDS = new ListView.DataSource({
    rowHasChanged: (r1, r2) => r1.user !== r2.user
});

this.state = {
    usersDataSource: usersDS.cloneWithRows([{
        "userId": "",
        "userName": "Ricardo"
    }])
}
<ListView 
    style={{paddingTop: 2, height:100}}
    dataSource={this.state.usersDataSource}
    renderRow={this.renderRowUsers.bind(this)}
/>

But this returns me the following error:

  

"StaticRender.reder (): A valid React element (or null) must be returned.   have returned undefined, an array or some other invalid object. "

    
asked by anonymous 25.07.2016 / 18:52

1 answer

0

I agree that you owe for the complete components. Only what you have here now can not tell us what's going on.

Check the existence of the render () function of each component, because it is necessary for each. Your API response seems simple, nothing too much. If it's just one array inside another, I'd just do that: I'd use response [0] to get the array of objects and map it to create Item components based on each object.

I do not know the context you put this.state , but you can not change the state just by doing a reassignment of the state variable. It is against immutability of the variable, which is one of the principles of React. When you want to change the state, you use this.setState({ chave1: valor1, chave2: valor2 }) , for example, to define a new state for the included values. The only place you can set the state using this.state = {} is in the constructor function if you are using ES6 (otherwise, set the initial state using < strong> getInitialState () , returning a literal object with key-values from it).

    
29.07.2016 / 05:26