Javascript 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>
    );
  }

constructor（）{
超级（）；
此.state={
页数：1，
pageName:'merchantReg'，
步骤名称：“基本细节”，
售货员：{
联系人：“明星”，
联系电话：“1234567890”，
电话号码：“，
电邮：“，
altemail:“”，
法律名称：“，
数据库名称：“”，
Pos的类型：“NA”，
noofpos:“0”，
包装：“NA”，
业务性质：“不适用”，
},
businessReg:{
业务类型：“，
gststatus:“”，
gstno:“”，
潘诺：“，
蒂诺：“，
店号：“，
销售税编号：“，
公务员薪酬：“，
当前位置：“”，
去年业务：“，
平均金额：“，
预期信用卡业务：“，
},
地址：“，
银行资料：{
银行名称：“，
银行分行：“，
帐户名：“”，
账号：“，
ifsccode:“”，
阿达尔诺：，
占有陈述：“，
posfirc：“NA”，
fircfreq：“不适用”，
},
mdr：{
借记卡溢价：“，
debitcardclassic:“”，
信用卡经典：“，
信用卡溢价：“，
外汇卡：“，
航站楼服务费：“，
终端类型：“”，
posamount:“
}
}
}
_storetoState=（键1，值）=>{
var page=this.state.pageName；
这是我的国家({
[第页]：{
…此.状态[第页]，
[键1]：值
}
})
}
StepsofRegistrations=async（）=>{
开关（this.state.pageCount）{
案例1：{
必填字段=[]；
push（'contactperson'，'contactno'，'email'，'legalname'，'dbaname'，'typeofpos'）；
返回（）；
打破
}
案例2：{
必填字段=[]；
push（'contactperson'，'contactno'，'email'，'legalname'，'dbaname'，'typeofpos'）；
return（）；
打破
}
}
}
render（）{
返回(
this.props.navigation.goBack（）}>
登记新业务
{this.state.stepName}
{this.state.pageCount}/6
{this.StepsofRegistrations（）}
);
}

我的子组件中的一个组件所有其他组件都与下面的代码相同，它们只是更改了名称

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;

import React，{Component}来自'React'；
从“react native”导入{View、Text、StyleSheet、AsyncStorage、ScrollView}；
从“本机基”导入{Picker，Label，Item，Input，Icon}；
从“道具类型”导入道具类型
类MerchantRegister扩展组件{
render（）{
返回(
联系人
this.props.handleChange（“联系人”，值）}/>
);
}
}
MerchantRegister.propTypes={
值：PropTypes.object.isRequired，
}
出口默认商品登记；

---

每当我从寄存器组件中删除

{this.StepsofRegistrations（）}

时，它都可以正常工作，但当我从

{this.StepsofRegistrations（）}

此函数中删除所有内容时，仍然会出现错误。

从

此.StepsofRegistrations（）

中删除异步对我有效。

---

但要了解更多信息，您可以查看：

能否更准确地显示您在何处将道具传递给子组件？我还注意到您的

MerchantRegister

类组件没有调用

super（props）

的

constructor（）

函数，如果您想在child中使用props，这是必需的。对于这种状态的复杂性，我建议您考虑使用

Redux

或

Context-API

仅在需要时共享状态，并避免在每个级别传递它在这里，我将状态作为值传递，在这里，我将作为prop访问状态

This.props.handleChange（“contactperson”，value）}/>

至少从_storeToState删除异步内容，那里不需要它。否则，您的模式与我使用的模式非常相似。@RomanBatsenko我已经分享了完整的错误代码，您现在可以检查它们了吗？一般的意见是，只有在您真正调用返回承诺的函数（http请求、db请求等）时，您才需要异步调用。当您在本地玩应用程序时，通常不需要执行这些操作。