[英]TypeError: undefined is not a function (near '...(0, _react.useCallBack)...'). I don't know what's wrong with the usCallBack() function in my code
I am getting this error if I am using useCallBack() in my code and after removing it then my filterScreen.js doesn't work.如果我在我的代码中使用 useCallBack() 并且在删除它之后我的 filterScreen.js 不起作用,我会收到此错误。
I am trying to get and save the params in "save" using react-navigation and printing the values of filters in the console.我正在尝试使用 react-navigation 获取参数并将其保存在“保存”中,并在控制台中打印过滤器的值。
Below is my code:下面是我的代码:
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",
alignItems: "center",
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;
I don't to how to solve this error and why I am getting this?我不知道如何解决这个错误,为什么我会得到这个?
This happens because savedFilters
is not a function.发生这种情况是因为
savedFilters
不是 function。
useCallback
does not return anything. useCallback
不返回任何内容。 Have updated the code for Filters
, if you could have a look.已经更新了
Filters
的代码,如果你可以看看的话。
I have used useMemo
to calculate currentFilters
on any change and whenever your currentFilters
change, it will automatically call the useEffect
for navigation update.我已经使用
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, lactoseFree, vegan, 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>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.