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

Question

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

无法创建TextInput元素，因为属性touched是 对象类型 [1] 中缺少，但存在于道具 [2] 中。[1] [2]

无法创建TextInput元素，因为缺少属性valid 在对象类型 [1] 中，但存在于道具 [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;

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

任何帮助将不胜感激。我希望这也有助于其他人。

谢谢。

Answer 1

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

我能够通过使用我在功能组件中使用的道具来解决此问题，如下所示：

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更改为您命名的剩余道具的任何内容，在本例中为 ...other .

就是这样！错误将消失。