无法调用子组件中可能为 'undefined' 的对象

Question

在我的 expo typescript 应用程序中，我在根组件中有一个函数：

  const getCardType = (type = ECardType.WOOD) => {
    setCardType(type);
  };

并将其传递到我的第一个子组件中：

  <Slider data={slideData} autoPlay={false} getCardType={getCardType} />

这是我传递函数的第一个子组件，它键入声明：

  readonly getCardType?: (type: ECardType) => void;



  const Slider: React.FunctionComponent<ISliderProps> = ({
    data,
    autoPlay,
    getCardType,
 })

之后我将它传递给第二个子组件：

<SliderCardItem cardItem={item} index={index} getCardType={getCardType} />

并且在这个 SliderItem 组件中，我使用了这个函数：

  useEffect(() => {
    getCardType(cardType);
  }, [cardType]);

但是出现 TS 错误：无法调用子组件中可能 'undefined' 的对象

我在下面的 onPress()
中设置了 cardType 我只在这个组件中有这个错误
有解决此错误的想法吗？

Answer 1

如果需要，请删除类型声明中的 ?。如果不需要，你必须先检查它是否存在。

还有一点，getCardType 实际上也是该效果的依赖项，但是通过查看它是安全的，忽略它（因为它只是包装了一个 setState）调用。

不过，我不喜欢忽略某些东西。所以如果我是你，我可能会这样写：

  // useCallback makes getCardType referentially identical between renders
  const getCardType = useCallback((type = ECardType.WOOD) => {
    setCardType(type);

  // safe to ignore setCardType in the dependencies because it's a dispatcher
  },[]);

// ... and in the child:

  useEffect(() => {
    getCardType(cardType);
  }, [ getCardType, cardType ]);

老实说，我非常想知道 child 中的 useEffect 是什么，因为它闻起来有点腥。

Answer 2

getCardType 可能未定义，如您在此处的类型所述：

getCardType?: (type: ECardType) => void;

然后你试图在不检查它是否存在的情况下调用它:

useEffect(() => {
  getCardType(cardType);
}, [cardType]);

因此您需要执行该检查：

useEffect(() => {
  if (getCardType) getCardType(cardType);
}, [cardType]);

或使用可选链接：

useEffect(() => {
  getCardType?.(cardType);
}, [cardType]);

如果它始终存在，那么您可以将其设为非可选类型：

getCardType: (type: ECardType) => void;

无法调用子组件中可能为 'undefined' 的对象

Cannot invoke an object which is possibly 'undefined' in children component

javascript

typescript

react-native

undefined