React native flatlist return 只有 firestore 中的一项

Question

我是 React Native 的新手。我正在使用平面列表来呈现来自 firebase (v9) 的数据。

一切正常，没有任何错误，但是列表只显示一项。在搜索不同的主题后，我认为问题出在 keyExtractor 上。但是我不知道怎么解决。

代码中的密钥提取器：

keyExtractor={item => item.id}

代码如下：

 const Liste = () => {
  const [users, setUsers] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [isLoading, setIsLoading] = useState(false);

const querySnapshot = await getDocs(collection(db, "form"));
querySnapshot.forEach((doc) => {
  setUsers([...users, doc.data()] );
});
    }

    const renderItem = ({ item }) => {
      return(

        <View>
          <View>
            <Text>{`${item.Address}`}</Text>
            <Text>{`${item.Prix}`}</Text>
            <Text>{`${id}`}</Text> 
          </View>
        </View>

      );
     };
  
    const renderLoader = () => {
      return (
        isLoading ?
          <View style={styles.loaderStyle}>
            <ActivityIndicator size="large" color="#aaa" />
          </View> : null
      );
    };
  
    const loadMoreItem = () => {
      setCurrentPage(currentPage + 1);
    };
  

   return (
       <View
         <StatusBar backgroundColor="#000" />
      <FlatList
        data={users}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        ListFooterComponent={renderLoader}
        onEndReached={loadMoreItem}
        onEndReachedThreshold={0}
      />
       </View>
   )}
 
 export default Liste;

Firestore :

应用程序的屏幕：

你能帮帮我吗？？非常感谢！！

Answer 1

推荐的最佳做法是运行副作用，例如从 useEffect 挂钩中的服务器获取数据。


const Liste = () => {
  const [users, setUsers] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [isLoading, setIsLoading] = useState(false);

  const getUsers = async () => {
    let result = [];
    const querySnapshot = await getDocs(collection(db, "form"));
    querySnapshot.forEach((doc) => {
      result.push(doc.data());
    });

    setUsers([...result]);
  };

  useEffect(() => {
    getUsers();
  }, []);

  const renderItem = ({ item }) => {
    return (
      <View>
        <View>
          <Text>{`${item.Address}`}</Text>
          <Text>{`${item.Prix}`}</Text>
        </View>
      </View>
    );
  };

  const renderLoader = () => {
    return isLoading ? (
      <View style={styles.loaderStyle}>
        <ActivityIndicator size="large" color="#aaa" />
      </View>
    ) : null;
  };

  const loadMoreItem = () => {
    setCurrentPage(currentPage + 1);
  };

  return (
    <View>
      <StatusBar backgroundColor="#000" />
      <FlatList
        data={users}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        ListFooterComponent={renderLoader}
        onEndReached={loadMoreItem}
        onEndReachedThreshold={0}
      />
    </View>
  );
};

export default Liste;

React native flatlist return 只有 firestore 中的一项

React native flatlist return only one item from firestore

javascript

firebase

react-native

react-native-flatlist

google-cloud-firestore