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。

就是这样！错误将消失。

对象存在于道具中，但不会创建元素React Native Flow Error

1 个答案: