Невозможно обновить состояние в компоненте с помощью вызова функции ReactNative

Question

Я новичок в реагировании на родной язык и последние несколько часов пытаюсь решить эту проблему. Я делаю простое приложение для отслеживания расходов, и на данный момент у меня есть 3 компонента: домашний экран, addexpensescreen и trackbudget.

У меня возникли проблемы с обновлением общих расходов на главном экране после добавления новых расходов с экрана addexpenses. Я использовал функцию из trackbudget в addexpensescreen, чтобы вызвать обновление его состояния. Он работает, когда я напрямую назначаю состояние его новому расходу, но мне нужно вручную обновить sh код в Visual Studio, прежде чем изменение будет отражено в приложении. Затем я попытался использовать this.setState (), но появилось предупреждение, в котором говорилось, что компонент отключен.

Пока это мой код. Любые советы будут оценены. Спасибо!

Экран отслеживания бюджета:

код

class TrackBudget extends React.Component {
constructor(props) {
    super(props);
    this.state = {
      budget: 1000,
      expenses: 500,
      cat: []
    };
  }

  updateExpenses(c) {
    //works only when i refresh the app on the homescreen page
    this.state.expenses += Number(c)

    //does not work but I think this is the proper implementation
    this.setState({ expenses: c + this.state.expenses})
  }

  budget() {
      return this.state.budget
  }

  expenses() {
      return this.state.expenses
  }}

  const budget = new TrackBudget()

  export default budget

HomeScreen:

код

export default function HomeScreen(props) {
    return {
       <View style={styles.container}>
         <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>   
            {/* Add current expenses from trackbudget*/}
                <Text style={styles.headerText}>Current Expenses for the Month: </Text>
          <View>
              //This is the place where I need the expense figure to be updated but it is not updating by itself
           <Text style = {styles.expenseText}>${budget.expenses()}</Text>
         </View>

addExpenseScreen:

код

<BackBtn 
    onPress = { () =>  {this.reset(); alert("Submitted");
    //updating the expenses with 50bucks
    budget.updateExpenses(50)
      }}></BackBtn>

Answer 1

Где визуализируется ваш компонент TrackBudget? Вы не можете обновить состояние экземпляра компонента, не смонтировав его. Если вы хотите установить состояние TrackBudget, его нужно отрендерить.

Непонятно, как эти компоненты связаны из вашего кода. С первого раза кажется, что весь этот лог c должен быть только на вашем домашнем экране, и вы можете сохранить бюджет в состоянии домашнего экрана. Затем, нажав кнопку, вы можете обновить состояние, чтобы отразить ваши обновленные расходы. Если вам нужно, чтобы кнопка находилась на отдельном экране, вы можете сделать addExpenseScreen дочерним по отношению к HomeScreen и передать обратный вызов для установки состояния HomeScreen.

Answer 2

Используйте стрелочные функции для правильной привязки функций к текущему контексту -

  updateExpenses = (c) => { // arrow function syntax
    const expenses =  this.state.expenses + Number(c)

    this.setState({ expenses })
  }

И напрямую ссылаться на значения состояния -

<Text style={styles.expenseText}>
  {this.state.expenses} // no need to call a function
</Text>