В конструкторе моего компонента у меня есть этот код:

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

В console.log я получил это:

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

Затем я отображаю свой плоский список следующим образом:

_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}
      />
    );
  }
}

Полный рендер компонента выглядит так:

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>
  );
}

И все же, мой плоский список не отображается. Как это возможно?

1
KacperM 4 Мар 2018 в 21:36

3 ответа

Лучший ответ

Похоже, он никогда не входит в условие if(this.state.weightsList.length > 0)

Проверьте, правильно ли отформатированы ваши данные, например

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

Может быть, вы должны разобрать свой ответ:

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});
})

Если это так, то в вашем плоском списке измените это:

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

По:

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

Вот демонстрация вашего кода, работающего на выставке

1
Yanci Nerio 4 Мар 2018 в 19:28

Ваша проблема в настройке состояния this.state.weightsList = result; Вы должны изменить этот код с помощью this.setState ({weightsList: result});

Для получения дополнительной информации, пожалуйста, проверьте это: response-native-state-management

0
erkan 4 Мар 2018 в 20:35

Эта строка ваша ошибка:

this.state.weightsList = result;

Вы можете использовать это вместо:

 this.setState({weightsList : result});

А также this.state.weightsList должен быть массивом. например:

[{"key":"Mar 4th 18","weight":"88"}]
0
Mohammad Nazari 5 Мар 2018 в 07:56