Question

我已经尝试调试了几个小时，但无济于事。我写的脚本基本上是在组件加载时从Firestore数据库中获取信息的。然后，我将阵列中的一项记录到控制台，结果为undefined。我不明白为什么它可以显示完整的阵列而不显示一个项目。然后整个数组生成完整数组（部分图像如下所示）。

此组件的主要目标是生成一个列表项，如list组件所示，但未显示任何内容。我的第一个猜测是从数据库获取信息的方法是异步的，但是如果状态更新了，这会很重要吗？该应用程序是否应该重新渲染？

这是我的代码的摘录，将不胜感激！

export default class ItemScreen extends Component {

  constructor () {
    super()
    this.state = {
      items: [],
    }
  }

  componentDidMount() {
    var items = []
    firebase.firestore().collection("items").get().then(function(querySnapshot) {
      querySnapshot.forEach(function(doc) {
          items.push(doc.data());
      });
    })
    this.setState({items: items});
    console.log(items[1])
    console.log(items)
  }

  render() {
    const { items } = this.state
    return (
        <View style={styles.container}>
          <SearchBar
            lightTheme
            onChangeText={(text) => console.log(text)}
            onClearText={() => console.log("cleared")}
            placeholder='Type Here...' 
            containerStyle={{width: "100%"}}
          />
          <List containerStyle={{width: "100%"}}>
            {
              items.map((l) => (
                <ListItem
                  roundAvatar
                  avatar={{uri:l.image}}
                  key={l.name}
                  title={l.name}
                />
              ))
            }
          </List>
        </View>
    );
  }
}

Answer 1

尝试重组为更类似的内容

var items = []
var self = this;
firebase.firestore().collection("items").get().then(function(querySnapshot) {
  querySnapshot.forEach(function(doc) {
      items.push(doc.data());
  });
  self.setState({items: items});
  console.log(items[1])
  console.log(items)
})

原始方法底部的代码将在结果可用之前运行。

React Native-无法获取数组中的项目，或无法从列表中显示数组中的项目

1 个答案: