React Native切换Tab时按条件更新sum状态故障求助

Let's walk through fixing your sum state not updating when switching tabs—there are a few key issues in your current code that we'll address one by one:

1. Fix the Tab Switch Property Typo #

First, your handleChangeTab is using obj.form but your console clearly shows the property is obj.from (you printed {i:1, ref:{…}, from:0}). On top of that, when updating state based on existing state values, always use the functional update form of setState to avoid race conditions from React's asynchronous state updates.

Update your handleChangeTab to this:

handleChangeTab=(obj) =>{
  console.log("0000",obj);
  const tabIndex = obj.from; // Fixed property name
  this.setState(prevState => ({
    sum: tabIndex === 0 ? prevState.as_hoc : prevState.invoice_specific
  }));
}

2. Properly Calculate & Update invoice_specific State #

Right now, you're calculating invoice_specific as a temporary variable inside render()—this value never gets saved to your component state, so this.state.invoice_specific stays at 0 forever. You need to move this calculation to your handleChange (checkbox toggle) function, so every time a checkbox is toggled, you recalculate the total and update the state.

First, fix your handleChange function (I assume you have this, since you're calling it in the CheckBox):

handleChange = (index) => {
  // Toggle the checked state for this index
  const updatedChecked = [...this.state.checked];
  updatedChecked[index] = !updatedChecked[index];

  // Calculate the new invoice_specific total
  const { financialTransactionDetail } = this.props;
  const newInvoiceSpecific = financialTransactionDetail.financialTransactionDetail.reduce((total, item, idx) => {
    return updatedChecked[idx] ? total + Number(item.TransactionAmount) : total;
  }, 0);

  // Update both checked state and invoice_specific total
  this.setState({
    checked: updatedChecked,
    invoice_specific: newInvoiceSpecific,
    // Also update sum if we're on Tab 1 (since we just changed the selection)
    sum: this.state.currentTabIndex === 0 ? newInvoiceSpecific : this.state.sum
  });
}

(Note: You'll need to add a currentTabIndex state variable to track which tab is active—initialize it to 0 in your state, and update it in handleChangeTab.)

3. Fix the as_hoc Input Update #

Make sure your handleChangeSum function actually updates the as_hoc state (and updates sum if we're on Tab 2):

handleChangeSum = (sumValue) => {
  const numericValue = Number(sumValue) || 0;
  this.setState(prevState => ({
    as_hoc: numericValue,
    sum: prevState.currentTabIndex === 1 ? numericValue : prevState.sum
  }));
}

4. Correctly Reference sum in the Button #

Your button is using sum directly, but you need to pull it from your component state:

<Button full onPress={()=>navigation.navigate('PaymentOptionsContainer', { sum: this.state.sum })}>
  <Text>Receive Payment (₦ {this.state.sum})</Text>
</Button>

5. Update Tab Change to Track Active Tab #

Add currentTabIndex to your initial state, and update it in handleChangeTab so we know which tab is active when updating sums:

this.state={ 
  sum:0, 
  invoice_specific:0, 
  as_hoc:0,
  checked: [], // Make sure this is initialized to match the length of financialTransactionDetail
  currentTabIndex: 0
}

// Update handleChangeTab to track active tab
handleChangeTab=(obj) =>{
  console.log("0000",obj);
  const tabIndex = obj.from;
  this.setState(prevState => ({
    currentTabIndex: tabIndex,
    sum: tabIndex === 0 ? prevState.invoice_specific : prevState.as_hoc
  }));
}

Final Notes #

• Initialize your checked state as an array of false values matching the length of financialTransactionDetail (do this in componentDidMount when the props load)
• Always convert string inputs to numbers when dealing with currency values to avoid unexpected string concatenation

内容的提问来源于stack exchange，提问作者Abhigyan Gaurav