类型错误：未定义不是函数靠近“...(0, _react.useCallBack)...”我不知道我的代码中的 usCallBack() 函数有什么问题

如何解决类型错误：未定义不是函数靠近“...(0, _react.useCallBack)...”我不知道我的代码中的 usCallBack() 函数有什么问题

如果我在我的代码中使用 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>
  );
};