TypeError: undefined is not a function（靠近'...（0，_react.useCallBack）...'）。 我不知道我的代码中的 usCallBack() function 有什么问题

Question

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

我不知道如何解决这个错误，为什么我会得到这个？

Answer 1

发生这种情况是因为savedFilters不是 function。

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, 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>
  );
};