问题描述
如果我在我的代码中使用 useCallBack() 并且在删除它之后我的 filterScreen.js 不起作用,我会收到这个错误。
我正在尝试使用 react-navigation 获取并保存“保存”中的参数,并在控制台中打印过滤器的值。
下面是我的代码:
import React,{ useState,useEffect,useCallBack } from "react";
import { View,Text,StyleSheet,Switch } from "react-native";
import { HeaderButtons,Item } from "react-navigation-header-buttons";
import CustomHeaderButton from "../component/CustomHeaderButton";
const Filters = (props) => {
return (
<View style={styles.filterContainer}>
<Text>{props.label}</Text>
<Switch value={props.state} onValueChange={props.Value} />
</View>
);
};
const FilteRSScreen = (props) => {
const { navigation } = props;
const [isglutenFree,setisglutenFree] = useState(false);
const [isLactoseFree,setisLactoseFree] = useState(false);
const [isvegan,setisvegan] = useState(false);
const [isveg,setisveg] = useState(false);
const savedFilters = useCallBack(() => {
const appliedFilters = {
glutenFree: isglutenFree,lactoseFree: isLactoseFree,vegan: isvegan,veg: isveg,};
console.log(appliedFilters);
},[isglutenFree,isLactoseFree,isvegan,isveg]);
useEffect(() => {
navigation.setParams({ save: savedFilters });
},[savedFilters]);
return (
<View style={styles.screen}>
<Text style={styles.title}>Filter Available!</Text>
<Filters
label="gluten-Free"
state={isglutenFree}
Value={(newValue) => setisglutenFree(newValue)}
/>
<Filters
label="Lactose-Free"
state={isLactoseFree}
Value={(newValue) => setisLactoseFree(newValue)}
/>
<Filters
label="Vegan"
state={isvegan}
Value={(newValue) => setisvegan(newValue)}
/>
<Filters
label="Veg"
state={isveg}
Value={(newValue) => setisveg(newValue)}
/>
</View>
);
};
const styles = StyleSheet.create({
screen: {
flex: 1,alignItems: "center",},title: {
fontFamily: "open-sans",fontSize: 22,margin: 20,textAlign: "center",filterContainer: {
flexDirection: "row",justifyContent: "space-between",width: "80%",marginVertical: 10,});
FilteRSScreen.navigationoptions = (navigationData) => {
return {
headerTitle: "Filter Meals",headerLeft: () => (
<HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
<Item
title="Menu"
iconName="ios-menu"
onPress={() => {
navigationData.navigation.toggleDrawer();
}}
/>
</HeaderButtons>
),headerRight: () => (
<HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
<Item
title="Save"
iconName="ios-save"
onPress={navigationData.navigation.getParam("save")}
/>
</HeaderButtons>
),};
};
export default FilteRSScreen;
解决方法
发生这种情况是因为 savedFilters
不是函数。
useCallback
不返回任何内容。已更新 Filters
的代码(如果您可以查看)。
我已使用 useMemo
计算任何更改的 currentFilters
,每当您的 currentFilters
更改时,它都会自动调用 useEffect
以进行导航更新。
const FiltersScreen = (props) => {
const { navigation } = props;
const [isGlutenFree,setisGlutenFree] = useState(false);
const [isLactoseFree,setisLactoseFree] = useState(false);
const [isVegan,setisVegan] = useState(false);
const [isVeg,setisVeg] = useState(false);
const selectedFilters = useMemo(() => {
return {
glutenFree,lactoseFree,vegan,veg
};
},[glutenFree,veg])
useEffect(() => {
navigation.setParams({ save: selectedFilters });
},[selectedFilters]);
return (
<View style={styles.screen}>
<Text style={styles.title}>Filter Available!</Text>
<Filters
label="Gluten-Free"
state={isGlutenFree}
Value={(newValue) => setisGlutenFree(newValue)}
/>
<Filters
label="Lactose-Free"
state={isLactoseFree}
Value={(newValue) => setisLactoseFree(newValue)}
/>
<Filters
label="Vegan"
state={isVegan}
Value={(newValue) => setisVegan(newValue)}
/>
<Filters
label="Veg"
state={isVeg}
Value={(newValue) => setisVeg(newValue)}
/>
</View>
);
};