React Native报错Invariant Violation：Cannot specify both value and children求助

错误原因 #

你的子组件Inputcomponent中，react-native-elements的<Input>组件被写成了<Input> </Input>（带闭合标签），但该组件属于自闭合组件。当你同时给它传入value属性（从父组件通过...rest传递）和空的children内容时，就会触发这个冲突错误——受控输入组件不能同时指定value和children。

修复步骤 #

只需要把子组件中的<Input> </Input>改为自闭合的<Input />即可。

修改后的子组件代码 #

import React ,{PureComponent} from 'react';
import {StyleSheet,View} from 'react-native';
import {Input} from 'react-native-elements';

class Inputcomponent extends PureComponent {
    state={};
    render(){
        const {cap,icon,...rest}=this.props;
        return(
            <View style={styles.root}>
                <Input
                    label={cap} 
                    errorMessage='this is invalid'
                    leftIcon={icon}
                    {...rest}
                />
            </View>
        );
    }
};
  
const styles=StyleSheet.create({
    root: {
        width: '90%',
        alignSelf: 'center',
        backgroundColor:"#DBE9FE",
        marginTop:10,
        borderRadius:15,
        height:60,
    },
});  

export default Inputcomponent;

额外注意点 #

• 父组件中第三个Inputcomponent的handleChange('Name')和handleBlur('Name')对应的值是values.Names，存在字段名不匹配问题（应该改为handleChange('Names')），会导致该输入框的值无法正确同步到Formik的values中，建议同步修正。

内容的提问来源于stack exchange，提问作者Mohamad Karimi