在此處輸入圖片說明
我是 React Native 的新手，我正在嘗試使用 React Native 中的 React 鉤子從 Cloud Firestore 創建實時搜索。我在主螢屏上遇到問題，我想在其中實施實時搜索，但收到圖片中顯示的錯誤。
下面是我的主螢屏源代碼：
const { width: viewportWidth } = Dimensions.get('window');
const HomeScreen = (props) => {
const { navigation, route } = props;
const appConfig = route.params.appConfig;
const appStyles = route.params.appStyles;
const dispatch = useDispatch();
const colorScheme = Appearance.getColorScheme();
// const ref = useRef([]);
const textInput = useRef([]);
const categoriesRef = useRef(firebase
.firestore()
.collection(VENDOR_CATEGORIES)
.orderBy('order'));
const dealsRef = useRef(firebase
.firestore()
.collection(VENDOR_CATEGORIES)
.orderBy('order'));
let ref = firebase.firestore().collection(VENDOR);
let unsubscribe = useRef(null);
let searchedText = [];
const [data, setData] = useState([]);
const [activeSlide, setActiveSlide] = useState(0);
const [categories, setCategories\] = useState([]);
const [deals, setDeals] = useState([]);
const [foods, setFoods] = useState([]);
const [filters, setFilters] = useState([]);
const [index, setIndex] = useState(0);
const [selectedItem, setSelectedItem] = useState({});
const [isVisible, setIsVisible] = useState(false);
const vendorsUnsubscribe = useRef(null);
const categorieUnsubscribe = useRef(null);
const dealsUnsubscribe = useRef(null);
const foodsUnsubscribe = useRef(null);
const vendorAPIManager = useRef(null);
const productsAPIManager = useRef(null);
const slider1Ref = useRef(null);
const [data, setData] = useState([]);
const [text, setText] = useState([]);
const [vendor, setVendor] = useState(0);
const vendors = useSelector((state) => state.vendor.vendors);
const searchRef = useRef();
useLayoutEffect(() => {
navigation.setOptions({
title: IMLocalized('Home Screen'),
headerLeft: () => (
<Hamburger
onPress={() => {
navigation.openDrawer();
}}
/>
),
headerTitle: () => (
<SearchBar
searchRef={searchRef}
appStyles={DynamicAppStyles}
onSearch={(text) => onSearch(text)}
onChangeText={(text) => onSearch(text)}
placeholder="Search vendors"
onSearchBarCancel={(text) => {
searchRef.current.clearText();
onSearch(text);
Keyboard.dismiss();
}}
/>
),
});
}, []);
useEffect(() => {
unsubscribe.current = ref.onSnapshot(onCollectionUpdate);
return () => {
unsubscribe.current();
}
}, []);
useEffect(() => {
return () => {
unsubscribe.current();
}
}, []);
const onCollectionUpdate = (querySnapshot) => {
const data = [];
querySnapshot.forEach((doc) => {
const { name } = doc.data();
const text =
searchedText != null ? searchedText.toLowerCase() : '';
const index = (String(name).toLowerCase().search(text));
if (index !== -1) {
data.push({
id: doc.id,
...doc.data(),
});
}
});
setData(data);
//setLoading(false);
};
const onSearch = (text) => {
ref = firebase.firestore().collection(VENDOR);
searchedText = text;
unsubscribe = ref.onSnapshot(onCollectionUpdate);
};
useEffect(() => {
if (VendorAppConfig.isMultiVendorEnabled) {
vendorAPIManager.current = new IMVendorListAPI(async (vendors) => {
dispatch(setVendors(vendors));
}, VENDOR);
} else {
productsAPIManager.current = new ProductsAPIManager( async (products) => {
dispatch(setPopularProducts(products));
});
}
}, []);
const navToMap = (vendors, navigation) => {
if (vendors.length > 0 || vendors !== undefined) {
navigation.navigate('Map', { vendors });
}
};
useEffect(() => {
initCartFromPersistentStore();
categorieUnsubscribe.current = categoriesRef.current.onSnapshot(
onCategoriesCollectionUpdate,
);
dealsUnsubscribe.current = dealsRef.current.onSnapshot(onDealsCollectionUpdate);
return () => {
categorieUnsubscribe.current && categorieUnsubscribe.current();
dealsUnsubscribe.current && dealsUnsubscribe.current();
if (VendorAppConfig.isMultiVendorEnabled) {
vendorAPIManager?.current.unsubscribe && vendorAPIManager?.current.unsubscribe();
} else {
productsAPIManager?.current.unsubscribe && productsAPIManager?.current.unsubscribe();
};
};
}, []);
const onPressCategoryItem = (item) => {
if (appConfig.isMultiVendorEnabled) {
props.navigation.navigate('Vendor', {
category: item,
appStyles,
appConfig,
});
} else {
props.navigation.navigate('SingleVendor', { category: item });
}
};
const onPressDealItem = (item) => {
if (appConfig.isMultiVendorEnabled) {
props.navigation.navigate('Vendor', {
category: item,
appStyles,
appConfig,
});
} else {
props.navigation.navigate('SingleVendor', { category: item });
}
};
const onCategoriesCollectionUpdate = (querySnapshot) => {
setCategories(querySnapshot.docs.map((doc) => doc.data()));
};
onDealsCollectionUpdate = (querySnapshot) => {
setDeals(querySnapshot.docs.map((doc) => doc.data()));
setSelectedItem({});
setIsVisible(false);
};
const initCartFromPersistentStore = () => {
AsyncStorage.getItem('@MySuperCart:key')
.then((res) => {
if (res != null) {
const cart = JSON.parse(res);
overrideCart(cart.cartItems);
setCartVendor(cart.vendor);
}
})
.catch((error) => {
console.log(`Promise is rejected with error: ${error}`);
});
};
const renderCategoryItem = ({ item }) => (
<TouchableOpacity onPress={() => onPressCategoryItem(item)}>
<View style={styles.categoryItemContainer}>
<FastImage
placeholderColor={DynamicAppStyles.colorSet[colorScheme].grey9}
style={styles.categoryItemPhoto}
source={{ uri: item.photo }}
/>
<Text style={styles.categoryItemTitle}>{item.title}</Text>
</View>
</TouchableOpacity>
);
const renderDealItem = ({ item }) => (
<TouchableOpacity onPress={() => onPressDealItem(item)}>
<View style={styles.dealItemContainer}>
<FastImage
placeholderColor={DynamicAppStyles.colorSet[colorScheme].grey9}
style={styles.dealPhoto}
source={{ uri: item.photo }}
/>
<View style={styles.overlay} />
<Text style={styles.dealName}>{item.title}</Text>
</View>
</TouchableOpacity>
);
const renderCategorySeparator = () => {
return (
<View
style={{
width: 10,
height: '100%',
}}
/>
);
};
return (
<ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
<IMVendorFilterModal
isVisible={isVisible}
filters={filters}
close={() => setIsVisible(false)}
/>
<Text style={styles.title}> {IMLocalized('Popular vendors')} </Text>
<View style={styles.categories}>
<FlatList
horizontal
initialNumToRender={4}
data={categories}
showsHorizontalScrollIndicator={false}
renderItem={renderCategoryItem}
keyExtractor={(item) => `${item.id}`}
/>
</View>
<Text style={styles.title}> {IMLocalized('Discounts')} </Text>
<View style={styles.deals}>
<View style={styles.carousel}>
<Carousel
ref={(c) => {
slider1Ref.current = c;
}}
data={deals}
renderItem={renderDealItem}
sliderWidth={viewportWidth}
itemWidth={viewportWidth}
// hasParallaxImages={true}
inactiveSlideScale={1}
inactiveSlideOpacity={1}
firstItem={0}
loop={false}
// loopClonesPerSide={2}
autoplay={false}
autoplayDelay={500}
autoplayInterval={3000}
onSnapToItem={(index) => setActiveSlide(index)}
/>
<Pagination
dotsLength={deals.length}
activeDotIndex={activeSlide}
containerStyle={styles.paginationContainer}
dotColor="rgba(255, 255, 255, 0.92)"
dotStyle={styles.paginationDot}
inactiveDotColor="white"
inactiveDotOpacity={0.4}
inactiveDotScale={0.6}
carouselRef={slider1Ref}
tappableDots={!!slider1Ref}
/>
</View>
</View>
<View style={styles.mostPopular}>
<Text style={styles.title}> {IMLocalized('Deals')} </Text>
{appConfig.isMultiVendorEnabled ? (
<IMVendorsScreen
navigation={props.navigation}
appConfig={VendorAppConfig}
appStyles={DynamicAppStyles}
route={route}
vendors={vendors}
/>
) : (
<PopularProductsListView />
)}
</View>
</ScrollView>
);
};
export default HomeScreen;
uj5u.com熱心網友回復：
setState(data);導致錯誤。設定任何狀態變數的值
例如。data在
const [data, setData] = useState([]);
你需要打電話 setData(value);
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/386076.html
標籤：javascript 反应 反应原生