CODEWITHSUNDEEP
javascriptreactjsreact-native
KacperM
KacperM

Reputation: 109

FlatList react-native not rendering

In the constructor of my component I've got this code:

AsyncStorage.getItem("@FitydeStore:weights", (err,result)=> {
  this.state.weightsList = result;
  }).then(() => {
  this.setState({refreshing: false});
});

in console.log I've got this:

{"key":"Mar 4th 18","weight":"88"}

Then I render my flat list like this:

_renderFlatList(){
  if(this.state.weightsList.length > 0){
    console.log(this.state.weightsList);
    return(
      <FlatList style={styles.flatList}
        data={this.state.weightsList}
        renderItem={
          (item) => <Text>{item.weight}{item.text}</Text>
        } 
        keyExtractor={(item, index) => index}
      />
    );
  }
}

Full render of the component is like this:

render() {
  return (
    <View style={styles.mainContainer}>
      <View style={styles.toolbar}>
        <Text style={styles.mainText}>
          Fityde
        </Text>
      </View>
      {this._renderTextInput()}
      {this._renderFlatList()}
      <View style={styles.bottomContainer}>
        <Button style={styles.addButton}
          onPress={this._onPressLearnMore}
          title="Add new record"
        />
      </View>
    </View>
  );
}

and still, my flat list item isn't displayed. How is that possible?

Upvotes: 1

Views: 488

Answers (3)

Mohammad Nazari
Mohammad Nazari

Reputation: 3045

This line is your error:

this.state.weightsList = result;

You can use this instead:

 this.setState({weightsList : result});

and also this.state.weightsList must be an array. for example:

[{"key":"Mar 4th 18","weight":"88"}]

Upvotes: 0

erkan
erkan

Reputation: 242

Your problem is setting state like this this.state.weightsList = result; you must change this code with this.setState({weightsList : result});

For more information please check this : react-native-state-managements

Upvotes: 0

Yanci Nerio
Yanci Nerio

Reputation: 814

Seems like it never enters in the condition if(this.state.weightsList.length > 0)

Check if your data well formatted like 

[{"key":"Mar 4th 18","weight":"88"}];

Maybe you should parse your response:

AsyncStorage.getItem("@FitydeStore:weights", (err,result)=> {
  this.state.weightsList = result;
  })
.then(res => {
  if (res.ok) { // or whatever condition you want to use
    return res.json();
  } else {    
    throw new Error();
  }
})
.then(parsedRes => {
  this.setState({refreshing: false});
})

If it is then in your flatlist change this:

renderItem={
 (item) => <Text>{item.weight}{item.text}</Text>
}

By:

renderItem={({ item } ) => (
  <Text>{item.weight}{item.key}</Text>
)}

Here is a demo of your code working on expo

Upvotes: 1

Related Questions