React Native-从TextInput组件在文本组件上显示文本会引发警告.如何避免此警告

Question

我试图在一个字段中获取输入并显示它，但这会引发警告。当我更改输入时，我可以看到文本字段上的信息。

但是，我该如何摆脱以下警告？

警告：函数作为React子级无效。如果返回"组件"而不是从渲染返回，则可能会发生这种情况。或者你想调用这个函数而不是返回它。%s，

我的代码如下：

class LoginUser extends Component{
constructor(props){
super(props);
this.state ={phoneNo:String};
this.updatePh = this.updatePhoneNo.bind(this);
}
updatePhoneNo(value){
this.setState({
phoneNo:value
})
}
render(){
return(
<View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
<TextInput value={this.state.phoneNo} placeholder="Mobile Number" keyboardType="numeric" 
onChangeText={(val) =>{this.updatePhoneNo(val)}} returnKeyType ='go'></TextInput>
<Text>Phone number value :{this.state.phoneNo}</Text>
</View>

);
}
}

我尝试创建另一个组件来显示数据。然而，我仍然收到同样的警告。

class PhoneText extends Component{
render(){
return(
<Text>The Value is {this.props.phoneNumber}</Text>
);
}
}
<PhoneText phoneNumber={this.state.phoneNo}></PhoneText>

Answer 1

更改此构造函数，将String删除为空字符串""

constructor(props){
super(props);
this.state ={phoneNo:""};
this.updatePh = this.updatePhoneNo.bind(this);
}

希望它能有所帮助，放心吧