我们如何在react native的两个选项卡更改中更新单个状态

Question

对于我共享的整个课程代码，请帮助我。 在此代码中，有两个标签，
在第一个选项卡中，我从数组中获取值，并获取T“ ransactionAmount”和映射的总和。所有这些值我都以状态sum传递。 现在，在第二个选项卡中，有一个输入字段必须输入任意数字。 条件：-当我首先在选项卡上时，值的总和应显示在下面的按钮中，当我进入第二个选项卡时，我输入的值将只进入状态总和。 这个总和值我在按钮下面。 基本上有一个状态总和，我要在制表符更改上更新值。但是在第一个制表符值可以正常使用，但是我要进入第二个制表符并输入val，然后它与第一个制表符值一起出现。 下面的链接是我的用户界面的参考和详细信息的屏幕截图。 请帮忙。 第一张照片

https://xd.adobe.com/view/d733da48-5d0c-47ca-7ded-6fc8f0f609cf-a102/screen/37cb15c6-b56a-4b98-8612-e9b86d0dd34c/Android-Mobile-147/?fullscreen

    // Below is array value 
   financialTransactionDetail: Array(3)
    0:
    AdjustedAmount: "0"
    NetTransactionAmount: "1050"
    TransactionAmount: 1050
    1:
    AdjustedAmount: "0"
    NetTransactionAmount: "1050"
    TransactionAmount: 1050

    2:
    AdjustedAmount: "0"
    NetTransactionAmount: "1050"
    Status: "Unpaid"
    TransactionAmount: 1050

    class PaymentsInvoice extends Component {
      constructor(props) {
        super(props);
        const { navigation,invoiceDetailsinfo } = this.props;
        const{financialTransactionDetail} = invoiceDetailsinfo;
        this.state = {
          title: 'Payments against invoice',
          icon: 'sim',
          mobile:navigation.state.params.customer.service.serviceNumber,
          checked: financialTransactionDetail.financialTransactionDetail.map(() => true),
          sum:0,
        }
      }

      handleChange(index){
        let newChecked = this.state.checked;
        newChecked[index] = !newChecked[index];
        this.setState({checked: newChecked})
      }

      handleChangeSum = (sumValue) => {
        this.setState({
          sum: parseInt(sumValue)
        });
      }

      render() {
        let { title, icon, mobile,invoice_specific,sum } = this.state;
        const { navigation,invoiceDetailsinfo } = this.props;
        const{financialTransactionDetail} = invoiceDetailsinfo;

        this.state.checked.map((value, index) => { 
          if(value) {
            sum += financialTransactionDetail.financialTransactionDetail[index].TransactionAmount; 
          } 
        });
        return (
          <View style={styles.imgBG}>
            <ScrollView keyboardShouldPersistTaps='always' showsVerticalScrollIndicator={false}>
              <View style={styles.container}>
                <View>
                  <Header title={title} icon={icon} subtitle={mobile} navigation={navigation} />
                </View>
                <View style={styles.dataContainer}>
                    <Tabs >
                      <Tab heading="INVOICE SPECIFIC"  tabLabel="SPECIFIC">
                      { !_.isEmpty(financialTransactionDetail.financialTransactionDetail) && financialTransactionDetail.financialTransactionDetail.map(
                        (data, index) => {
                          const formatedate = data.DueDate;
                          const formateDate = formatedate.split(' ')[0];
                          return(
                            <View key={index} style={{flexDirection:'row', padding:10, alignItems:'center', justifyContent:'space-between',backgroundColor:'#fff'}}>

                          <View style={{paddingRight:10, marginRight:10}}>
                          <CheckBox style={styles.checkBox} color="#00678f" checked={this.state.checked[index]} onPress={() =>this.handleChange(index)}/>
                          </View>
                          <View style={{flexDirection:'column',flex:1, padding:10, borderWidth:1, borderColor:'lightgrey', borderRadius:3}}>
                            <View style={{flexDirection:'row', alignItems:'center'}}>
                              {!this.state.checked[index] && <RegularText text={`₦ ${data.TransactionAmount}`} style={{paddingBottom:10, paddingRight:5}}/>}
                              <SmallText text={`Due by ${(formateDate)}`} style={{paddingBottom:10}}/>
                            </View>
                            {this.state.checked[index] && 
                            <RegularText text={`₦ ${data.TransactionAmount}`} style={{borderColor: '#00fff', borderBottomWidth:1}}>
                              </RegularText>
                            }
                          </View>
                        </View>
                          )
                        }
                      )
                      }

                      </Tab>
                      <Tab heading="AD-HOC" tabLabel="AD-HOC">
                        <View style={{flexDirection:'column', padding:10,  backgroundColor:'#fff', minHeight:deviceHeight }}>
                          <RegularText text="Enter Specific Amount to pay" style={{paddingBottom:5}} textColor="#959595"/>
                          <View>
                            <Item style={{borderColor: '#00fff', borderBottomWidth:1}}>
                              <Input
                                  autoFocus={true}
                                  onPress={() => this.handleChange('sumValue')}
                                  onChangeText={(sumValue) => this.handleChangeSum(sumValue)}
                                />
                            </Item>
                          </View>
                        </View>
                      </Tab>
                    </Tabs>
                </View>
              </View>
            </ScrollView>
            <View style={{bottom:0,position:'absolute', width: '100%'}}>
              <Button full onPress={()=>navigation.navigate('PaymentOptionsContainer',sum)}>
                <Text>Receive Payment ({sum})</Text>
              </Button>
            </View>

          </View>
        );
      }
    }
    export default PaymentsInvoice;

谢谢：）

Answer 1

您应该使用单一的事实来源，即在父组件中包含状态，因此，当父组件重新呈现时，它将从其自身的状态获取值并将其传递给子组件。