firebase - 从 firebase-React-Native 渲染的问题

Question

我有这个问题：我必须渲染一个 FlatList 映射 Firestore 文档，我这样做：

componentDidMount();
{
    const cat = [];

    var db = firebase.firestore();
    const ristoDoc = db.collection("ristoranti").where("telefono", "==", "3296812820");
    ristoDoc.get().then((snapshot) => {
        snapshot.forEach((doc) => {
            this.setState({
                id: doc.id,
            });
        });
    });
    db.collection("ristoranti")
        .doc(this.state.id)
        .collection("categorie")
        .onSnapshot((querysnapshot) => {
            querysnapshot.forEach((doc) => {
                const data = doc.data();
                this.setState({
                    nome: data,
                });
                cat.push(data);
            });
            this.setState({
                categorie: cat,
            });
        });
}

还有我的平面列表：

<
FlatList horizontal = {
  true
}
pagingEnabled = {
  true
}
style = {
  {
    width: '100%',
    height: '22%'
  }
}
contentContainerStyle = {
  {
    height: '90%',
    width: 100
  }
}
data = {
  this.state.categorie
}
renderItem = {
    (item) =>
    {

      <View>
>        <Text key={item.id}> {item.nome} </Text> 
        <View>
    
        <TouchableOpacity onPress = {
          () => this.setState(
          {
            visibileProdottoAdd: true
          })
        }>
        <Text> + </Text> </TouchableOpacity> </View> </View>

但是我总是遇到相同的图像错误[ ]我尝试了一整天，没有任何改变我在 item.name 上做了一个小错误，原始代码中有大括号

更新

<FlatList
                    horizontal={true}
                    pagingEnabled={true}
                    style={{ width: "100%", height: "22%" }}
                    contentContainerStyle={{ height: "90%", width: 100 }}
                    data={this.state.categorie}
                    key={({ item }) => {
                      item.id;
                    }}
                    renderItem={({ item }) => {
                      <View
                        style={{
                          flexDirection: "row",
                          justifyContent: "flex-start",
                          alignItems: "center",
                          width: 200,
                        }}
                      >
                        <Text
                          key={item.id}
                          style={{
                            fontSize: 20,
                            color: "#C6C6C6",
                            marginBottom: 5,
                            width: "35%",
                          }}
                        >
                          {item.nome}
                        </Text>
                        <View
                          style={{
                            flexDirection: "row",
                            justifyContent: "flex-end",
                            alignItems: "center",
                            width: "60%",
                          }}
                        >
                          <TouchableOpacity
                            onPress={() =>
                              this.setState({ visibileProdottoAdd: true })
                            }
                          >
                            <Text style={{ fontSize: 20, color: "#66a3ff" }}>
                              +
                            </Text>
                          </TouchableOpacity>
                        </View>
                      </View>;
                    }}
                  ></FlatList>

我在这个版本中编辑我的代码，没有任何变化，在 componentdidmount 函数中我尝试测试从 Firestore 获得的内容

  componentDidMount() {
    const cat = [];

    var db = firebase.firestore();
    const ristoDoc = db
      .collection("ristoranti")
      .where("telefono", "==", "3296812820");
    ristoDoc.get().then((snapshot) => {
      snapshot.forEach((doc) => {
        this.setState({ id: doc.id });
      });
    });
    db.collection("ristoranti")
      .doc("qKEWUfZPsy2pu6IoFUio")
      .collection("categorie")
      .onSnapshot((querysnapshot) => {
        querysnapshot.forEach((doc) => {
          const data = doc.data();
          this.setState({ nome: data });
          cat.push(data);
          cat.forEach(({i})=>{console.log(i.nome)})
        });
        this.setState({ categorie: cat });
      });

奇怪的是，这是 Expo Cli 上的错误，但在我的 Visual Studio 控制台日志中，我有我的姓名列表。

标签： firebasereact-nativereact-native-androidreact-native-flatlist

Answer 1

你犯了一个非常简单的错误。我认为问题出在渲染项中。

  <FlatList
    data={arr}
    key={({ item }) => item}
    onEndReached={({ index }) => handleLoadMore(index)}
    renderItem={({item} ) => <RenderItem item={item} />}
  />

你正在传递一个项目。你必须通过对象 {item}