React Native - Listview

Asked

Viewed 342 times

5

Does Reactnative Listview accept an array of arrays ? Because I need to receive 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 it returns me the following error :

"Staticrender.Reder():A Valid React element(or null) must be retorned. You may have returned Undefined, an array or some other invalid Object."

react react-native

  • You can show the code of ListView? gives me idea that this array of this.renderRowUsers should go inside the jsx of ListView

  • I added in the code, I was in doubt what to put in rowHasChanged , as it will compare the arrays ?

  • It would be better to put your (s) complete Component(s), so pieces of it is difficult to know how the logic is.

1 answer

1

I agree that you should put the Components in full. Just what you have now here does not give us to know what is happening.

Check the existence of the render() function of each Component, because it is necessary for each. Your API response seems to be simple, no big deal. If it’s just one array inside another, I’d just do this: use answer[0] to take the object array and make a map to create Item Components based on each object.

I don’t know what context you put in this state., but you can’t change state just by doing a state variable reassignment. It’s against immutability 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 set a new state for the included values. The only local that Voce can set the state using this.state = {} is in the function constructor if you are using SE6 (if not, set the initial state using function getInitialState(), returning a literal object with its key-values).

Browser other questions tagged react react-native

You are not signed in. Login or sign up in order to post.