Javascript 从导航道具获取值时如何保存状态？自然反应

我有两个屏幕，主屏幕Macros.js，在那里我可以设置我的目标卡路里，并手动添加卡路里。在另一个屏幕上，我有一个搜索食品数据库的API，当我点击它们时，我通过props.navigation将值发送到我的主屏幕：

Tracker.js

<Button
            title="Macros"
            onPress={() =>
              navigate("Macros", {
                totalCals: totalCals,
                totalCarbs: totalCarbs,
                totalProtein: totalProtein,
                totalFat: totalFat,
              })

我在屏幕内手动添加卡路里

addMacrosManually = (ProteinInput, FatInput, CarbsInput) => {

    let CalsProteinInput = ProteinInput * 4;
    let CalsFatInput = FatInput * 9;
    let CalsCarbsInput = CarbsInput * 4;

    let CalsCalorieInput = CalsCarbsInput + CalsFatInput + CalsProteinInput;
    
    this.setState({
      UsedDailyCalories: +CalsCalorieInput,
      UsedDailyFat: +FatInput,
      UsedDailyCarbs: +CarbsInput,
      UsedDailyProtein: +ProteinInput,
      showModal2: false,
    });


    const firstPair = ["UsedTotalCalories", JSON.stringify(this.state.UsedDailyCalories)];
    const secondPair = ["UsedTotalCarbs", JSON.stringify(this.state.UsedDailyCarbs)];
    const thirdPair = ["UsedTotalProtein", JSON.stringify(this.state.UsedDailyProtein)];
    const fourthPair = ["UsedTotalFat", JSON.stringify(this.state.UsedDailyFat)];

    try {
      this.setState({});
      var usedValues = [firstPair, secondPair, thirdPair, fourthPair];
      AsyncStorage.setItem("DATA_KEY", JSON.stringify(usedValues))


    } catch (error) {
      console.log(error);
    }

  };

getData = async () => {

    try {
      AsyncStorage.multiGet(["key1", "key2"]).then(response => {
      })

    } catch(e) {
      // read error
    }
  };

渲染方法

render() {
    console.log(this.state.UsedDailyCalories);
    const { navigate } = this.props.navigation;
    let CaloriePercentage = this.state.CaloriePercentage + "%";

    let calsTakenFromTracker = parseInt(
      this.props.navigation.getParam("totalCals", "nothing sent")
    );
    this.state.UsedDailyCalories += calsTakenFromTracker;

    let totalCarbs = parseInt(
      this.props.navigation.getParam("totalCarbs", "nothing sent")
    );
    this.state.UsedDailyCalories += totalCarbs;

    return (
      //styling for navigation container
      <View style={styles.container}>
        <View style={styles.topStyle}>
          <Text>{calsTakenFromTracker} </Text>
          <Text>{totalCarbs} </Text>

render（）{
console.log（this.state.UsedDailyCalories）；
const{navigate}=this.props.navigation；
让卡路里百分比=this.state.卡路里百分比+“%”；
让calsTakenFromTracker=parseInt(
this.props.navigation.getParam（“totalCals”，“未发送任何内容”）
);
this.state.UsedDailyCalories+=calsTakenFromTracker；
设totalCarbs=parseInt(
this.props.navigation.getParam（“totalCarbs”，“未发送任何内容”）
);
this.state.UsedDailyCalories+=总碳水化合物；
返回(
//导航容器的样式
{calsTakenFromTracker}
{totalCarbs}

我认为问题在于您调用

this.setState（{}）

内部的

addMacrosManually

。这会重置您的状态

---

如果您有一个类型为number的属性，并且希望增加一定数量，您可以执行以下操作：

确保道具具有初始值：

// ...
this.state = {
   test: 0,
};
// ...

使用属性的上一个状态值并向其添加一个数字：

this.setState({test: this.state.test + 1});

如果

this.props.navigation.getParam（“totalFat”，“nothing sent”）

是一个数字，您可以用导航时收到的参数替换上例中的

1

---

上的

+

运算符描述如下：

一元加号运算符（+）位于其操作数之前并计算为其操作数，但如果尚未将其转换为数字，则尝试将其转换为数字

---

因此，当整个状态被类似于

this.setState（{}）

的调用重置时，这不会阻止属性被重置。我更新了我的答案以解决您的问题，并添加了一些关于如何解决问题的更多细节。

this.setState({test: this.state.test + 1});