javascript - 对象存在于 Props 中，但不会创建元素 React Native Flow 错误

Question

我一直试图找出为什么我的 React Native 项目中出现流程错误。我无法找到直接的答案，因此我很困惑。该项目有效，但我仍然有这个错误。

Cannot create TextInput element because property touched is missing in object type [1] but exists in props [2]. [1] [2]

Cannot create TextInput element because property valid is missing in object type [1] but exists in props [2]. [1] [2]

这指向下面代码中的第 8 行。

// @flow
import React from 'react';
import { TextInput, StyleSheet } from 'react-native';

type Props = { style: Object, valid?: bool, touched?: bool };

const defaultInput = (props: Props) => (
    <TextInput   <--- Error Points Here!!!
      underlineColorAndroid="transparent"
      {...props}
      style={[styles.input, props.style, !props.valid && props.touched ? styles.invalid : null]}

    />
);

const styles = StyleSheet.create({
    input: {
      width: "100%",
      borderWidth: 1,
      borderColor: "#eee",
      padding: 5,
      marginTop: 8,
      marginBottom: 8
    },
    invalid: {
      backgroundColor: '#f9c0c0',
      borderColor: 'red'
    }
  });

export default defaultInput;

我很困惑为什么 Flow 会抛出这个错误以及它的含义。我一直在尝试解决这个问题，但到目前为止还没有解决方案。

如有任何帮助，我们将不胜感激。我希望这也对其他人有帮助。

谢谢。

Answer 1

在这里提供帮助有点晚了，但我也遇到了这个问题并开始寻找答案，所以希望这可以帮助其他人。

我能够通过使用我在功能组件中使用的 Prop 来解决这个问题，如下所示:

type Props = {
   loading: boolean
};

export default function LoadingIndicator(props: Props) {

   // this is the key! Take out the props you've defined in your type above
   const { loading, ...other } = props;

   if (loading) {

      return (
         <View
            {...other}
            style={styles.loadingIndicator}>
            <ActivityIndicator animating size="large" />
         </View>
      );
   } else return null;
}

确保将 ...props 更改为您命名的剩余 props，在本例中为 ...other。

就是这样!错误将会消失。