Question

在我的组件的构造函数中，我得到了这段代码：

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

然而，我的单位列表项目未显示。怎么可能？

Answer 1

似乎它永远不会进入条件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>
)}

以下是您在代码上使用的demo代码

Answer 2

你的问题是设置这样的状态this.state.weightsList = result; 您必须使用this.setState（{weightsList：result}）;

更改此代码

有关详情，请查看：react-native-state-managements

Answer 3

此行是您的错误：

this.state.weightsList = result;

您可以改用：

 this.setState({weightsList : result});

并且this.state.weightsList也必须是数组。例如：

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

FlatList react-native不呈现

3 个答案: