javascript - React Native - 我可以将状态对象从父组件传递给子组件吗？

Question

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

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

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()} 中删除所有内容时函数这仍然给我错误。

Answer 1

从 this.StepsofRegistrations() 中删除异步对我有用。但有关更多信息，您可以查看:https://stackoverflow.com/a/37997990/4315757