Question

我是新来的本地人，在过去的几个小时中，我一直在努力解决此问题。我正在制作一个简单的费用跟踪器应用，目前有3个组件，主屏幕，addexpensescreen和trackbudget。

从addexpense屏幕添加新费用后，我在更新主屏幕上的总费用时遇到问题。我在addexpensescreen中使用trackbudget中的一个函数来调用其状态的更新。当我将状态直接分配给它的新费用时，它可以工作，但是我必须在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

主屏幕：

代码

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

使用箭头函数将函数正确绑定到当前上下文-

  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>

Answer 2

您的TrackBudget组件在哪里呈现？如果不安装组件，则无法更新组件实例的状态。如果要设置TrackBudget的状态，则需要呈现它。

目前尚不清楚这些组件如何通过代码连接。从一开始，似乎所有这些逻辑都应该放在主屏幕上，并且您可以将预算存储在主屏幕的状态中。然后单击按钮，您可以更新状态以反映更新的费用。如果需要将按钮放在单独的屏幕上，则可以将addExpenseScreen设为HomeScreen的子级，并传递回调以设置HomeScreen的状态。

无法通过函数调用ReactNative更新组件中的状态

2 个答案: