React Native的新功能。 我正在创建注册表单，并在其中创建了表单向导，每个步骤都有一个不同的组件。我想处理父组件中每个输入的状态。
错误：
Invariant Violation: Invariant Violation: Invariant Violation: Invariant Violation: Objects are not valid as a React child (found:
object with keys {_40, _65, _55, _72}). If you meant to render a
collection of children, use an array instead.
in RCTView (at View.js:45)
in RCTScrollView (at ScrollView.js:977)
in ScrollView (at KeyboardAwareHOC.js:397)
in _class (at Content.js:125)
in Content (at connectStyle.js:384)
in Styled(Content) (at RegisterBusiness.js:271)
in RCTView (at View.js:45)
in Container (at connectStyle.js:384)
in Styled(Container) (at RegisterBusiness.js:242)
in RegisterBusiness (at SceneView.js:9)
in SceneView (at StackViewLayout.js:478)
in RCTView (at View.js:45)
in RCTView (at View.js:45)
in RCTView (at View.js:45)
in AnimatedComponent (at screens.native.js:58)
in Screen (at StackViewCard.js:42)
in Card (at createPointerEventsContainer.js:26)
in Container (at StackViewLayout.js:507)
in RCTView (at View.js:45)
in ScreenContainer (at StackViewLayout.js:401)
in RCTView (at View.js:45)
in StackViewLayout (at withOrientation.js:30)
in withOrientation (at StackView.js:49)
in RCTView (at View.js:45)
in Transitioner (at StackView.js:19)
in StackView (at createNavigator.js:57)
in Navigator (at createKeyboardAwareNavigator.js:11)
in KeyboardAwareNavigator (at createNavigationContainer.js:376)
in NavigationContainer (at SceneView.js:9)
in SceneView (at DrawerView.js:87)
in RCTView (at View.js:45)
in AndroidDrawerLayout (at DrawerLayoutAndroid.android.js:205)
in DrawerLayoutAndroid (at DrawerView.js:84)
in DrawerView (at createNavigator.js:57)
in Navigator (at createNavigationContainer.js:376)
in NavigationContainer (at SceneView.js:9)
in SceneView (at SwitchView.js:12)
in SwitchView (at createNavigator.js:57)
in Navigator (at createNavigationContainer.js:376)
in NavigationContainer (at App.js:135)
in RCTView (at View.js:45)
in Root (at connectStyle.js:384)
in Styled(Root) (at App.js:134)
in App (at renderApplication.js:34)
in RCTView (at View.js:45)
in RCTView (at View.js:45)
in AppContainer (at renderApplication.js:33)
This error is located at:
in RCTView (at View.js:45)
in RCTScrollView (at ScrollView.js:977)
in ScrollView (at KeyboardAwareHOC.js:397)
in _class (at Content.js:125)
in Content (at connectStyle.js:384)
in Styled(Content) (at RegisterBusiness.js:271)
in RCTView (at View.js:45)
in Container (at connectStyle.js:384)
in Styled(Container) (at RegisterBusiness.js:242)
in RegisterBusiness (at SceneView.js:9)
in SceneView (at StackViewLayout.js:478)
in RCTView (at View.js:45)
in RCTView (at View.js:45)
in RCTView (at View.js:45)
in AnimatedComponent (at screens.native.js:58)
in Screen (at StackViewCard.js:42)
in Card (at createPointerEventsContainer.js:26)
in Container (at StackViewLayout.js:507)
in RCTView (at View.js:45)
in ScreenContainer (at StackViewLayout.js:401)
in RCTView (at View.js:45)
in StackViewLayout (at withOrientation.js:30)
in withOrientation (at StackView.js:49)
in RCTView (at View.js:45)
in Transitioner (at StackView.js:19)
in StackView (at createNavigator.js:57)
in Navigator (at createKeyboardAwareNavigator.js:11)
in KeyboardAwareNavigator (at createNavigationContainer.js:376)
in NavigationContainer (at SceneView.js:9)
in SceneView (at DrawerView.js:87)
in RCTView (at View.js:45)
in AndroidDrawerLayout (at DrawerLayoutAndroid.android.js:205)
in DrawerLayoutAndroid (at DrawerView.js:84)
in DrawerView (at createNavigator.js:57)
in Navigator (at createNavigationContainer.js:376)
in NavigationContainer (at SceneView.js:9)
in SceneView (at SwitchView.js:12)
in SwitchView (at createNavigator.js:57)
in Navigator (at createNavigationContainer.js:376)
in NavigationContainer (at App.js:135)
in RCTView (at View.js:45)
in Root (at connectStyle.js:384)
in Styled(Root) (at App.js:134)
in App (at renderApplication.js:34)
in RCTView (at View.js:45)
in RCTView (at View.js:45)
in AppContainer (at renderApplication.js:33)
This error is located at:
in NavigationContainer (at SceneView.js:9)
in SceneView (at DrawerView.js:87)
in RCTView (at View.js:45)
in AndroidDrawerLayout (at DrawerLayoutAndroid.android.js:205)
in DrawerLayoutAndroid (at DrawerView.js:84)
in DrawerView (at createNavigator.js:57)
in Navigator (at createNavigationContainer.js:376)
in NavigationContainer (at SceneView.js:9)
in SceneView (at SwitchView.js:12)
in SwitchView (at createNavigator.js:57)
in Navigator (at createNavigationContainer.js:376)
in NavigationContainer (at App.js:135)
in RCTView (at View.js:45)
in Root (at connectStyle.js:384)
in Styled(Root) (at App.js:134)
in App (at renderApplication.js:34)
in RCTView (at View.js:45)
in RCTView (at View.js:45)
in AppContainer (at renderApplication.js:33)
This error is located at:
in NavigationContainer (at SceneView.js:9)
in SceneView (at SwitchView.js:12)
in SwitchView (at createNavigator.js:57)
in Navigator (at createNavigationContainer.js:376)
in NavigationContainer (at App.js:135)
in RCTView (at View.js:45)
in Root (at connectStyle.js:384)
in Styled(Root) (at App.js:134)
in App (at renderApplication.js:34)
in RCTView (at View.js:45)
in RCTView (at View.js:45)
in AppContainer (at renderApplication.js:33)
This error is located at:
in NavigationContainer (at App.js:135)
in RCTView (at View.js:45)
in Root (at connectStyle.js:384)
in Styled(Root) (at App.js:134)
in App (at renderApplication.js:34)
in RCTView (at View.js:45)
in RCTView (at View.js:45)
in AppContainer (at renderApplication.js:33) throwOnInvalidObjectType
父组件：Register.js
constructor() {
super();
this.state = {
pageCount: 1,
pageName : 'merchantReg',
stepName: "Basic Details",
merchantReg: {
contactperson: "STAR",
contactno: "1234567890",
altcontactno: "",
email: "",
altemail: "",
legalname: "",
dbaname: "",
typeofpos: "NA",
noofpos: "0",
pacakage: "NA",
natureofbusiness: "NA",
},
businessReg : {
businessType: "",
gststatus:"",
gstno:"",
panno:"",
tinno:"",
shopno:"",
salestaxno:"",
officepremisis:"",
currentlocation:"",
businesslastyear:"",
averagebillamt:"",
expectedcardbusiness:"",
},
residenceaddress:"",
bankDetails : {
bankname:"",
bankbranch:"",
accountname:"",
accountno:"",
ifsccode:"",
aadharno:"",
posstatement:"",
posfirc:"NA",
fircfreq:"NA",
},
mdr:{
debitcardpremium:"",
debitcardclassic:"",
creditcardclassic:"",
creditcardpremium:"",
foreigncard:"",
terminal_service_fee:"",
terminal_type:"",
posamount:""
}
}
}
_storetoState = (key1,value) => {
var page = this.state.pageName;
this.setState({
[page]: {
...this.state[page],
[key1] : value
}
})
}
StepsofRegistrations = async () => {
switch(this.state.pageCount){
case 1: {
requiredFields = [];
requiredFields.push('contactperson','contactno','email','legalname','dbaname','typeofpos');
return (<MerchantRegister value={this.state.merchantReg} handleChange={this._storetoState} />);
break;
}
case 2: {
requiredFields = [];
requiredFields.push('contactperson','contactno','email','legalname','dbaname','typeofpos');
return(<ShopDetails value={this.state.businessReg} handleChange={this._storetoState}/>);
break;
}
}
}
render() {
return (
<Container>
<Header noShadow>
<Left>
<Button transparent onPress={() => this.props.navigation.goBack()}>
<Icon name='arrow-back'/>
</Button>
</Left>
<Body>
<Title style={{
width: 215
}}>
Register a New Business
</Title>
</Body>
<Right></Right>
</Header>
<View style={{
paddingHorizontal:30,
padding:10,
backgroundColor:'#eee',
flexDirection:'row',
justifyContent:'space-between',
elevation:1
}}>
<View><Text style={{fontSize:18}}>{this.state.stepName}</Text></View>
<View><Text style={{fontSize:17,textAlign:'right'}}>{this.state.pageCount}/6</Text></View>
</View>
<Content>
<View style={{
borderWidth:0.2,
borderColor:'#ccc',
}}></View>
{this.StepsofRegistrations()}
</Content>
</Container>
);
}
我的Child组件中的所有其他组件与下面的代码相同，它们只是更改了名称。
import React, {Component} from 'react';
import { View, Text, StyleSheet, AsyncStorage, ScrollView } from 'react-native';
import { Picker, Label, Item, Input, Icon } from 'native-base';
import PropTypes from 'prop-types'
class MerchantRegister extends Component {
render() {
return (
<ScrollView style={{
paddingHorizontal: 30,
paddingVertical: 20
}}>
<View style={{
marginVertical: 10
}}>
<Label
style={{
fontSize: 14,
marginBottom: 10
}}>
Contact Person
</Label>
<Item regular>
<Input value={this.props.value.contactperson} onChangeText={value => this.props.handleChange("contactperson",value)}/>
</Item>
</View>
</View>
</ScrollView>
);
}
}
MerchantRegister.propTypes = {
value: PropTypes.object.isRequired,
}
export default MerchantRegister;
每当我从寄存器组件中删除{this.StepsofRegistrations()}时，它都可以正常工作，但是当我从{this.StepsofRegistrations()}中删除所有内容时，此功能仍然会给我带来错误。
答案 0 :(得分：3)
从[
{
"datetime": "2017-06-29T13:14:22-04:00",
"headline": "Voice Search Technology Creates A New Paradigm For Marketers",
"source": "Benzinga via QuoteMedia",
"url": "https://api.iextrading.com/1.0/stock/aapl/article/8348646549980454",
"summary": "<p>Voice search is likely to grow by leap and bounds, with technological advancements leading to better adoption and fueling the growth cycle, according to Lindsay Boyajian, <a href=\"http://loupventures.com/how-the-future-of-voice-search-affects-marketers-today/\">a guest contributor at Loup Ventu...",
"related": "AAPL,AMZN,GOOG,GOOGL,MSFT",
"image": "https://api.iextrading.com/1.0/stock/aapl/news-image/7594023985414148"
}
]
删除异步为我工作。
但是有关更多信息，您可以查看：https://stackoverflow.com/a/37997990/4315757