React Native - 无法单独更新项目内的新状态

Question

我从一个 api 中提取了数据，里面有一个练习列表，这里是一个练习对象示例。

    {
        pivot_id:1,
        id:1,
        image_path: "exercise\/images\/q3YaO7uuFYgZDFg7fnVpn3eYxrb5oUZeKwE6mNf7.png",
        name:"Smitham PLC",
        duration:423,
        duration_per_rep:5,
        intensity:{
          id:2,
          intensity: "Moderate Resistance Training",
          met_value:4.5
        },
        image:"https:\/\/s3-eu-west-1.amazonaws.com\/fitness-concierge\/exercise\/images\/q3YaO7uuFYgZDFg7fnVpn3eYxrb5oUZeKwE6mNf7.png",
        kcal:5,
  },

我创建了一个默认值为 60 的 customDuration 状态，我想通过使用按钮添加一个持续时间为 30 秒的持续时间来将其添加到每个练习对象。但是，我在更新一个特定项目时遇到了问题。

例如，我渲染了两个项目，当我按下 + 按钮为它添加 30 秒的练习时，它从 60 秒变为 90 秒，但是当我去添加一些时间时列表中的第二项将从 60 到 120，这是问题发生的地方。

 addDuration(item, index) {
    let newArray = [...this.state.warm_up_exercises];
    newArray[index] = { 
        ...newArray[index], 
        customDuration: this.state.customDuration = this.state.customDuration + 30,
        storeValues: true,
        workoutStoreType: 'duration',
    };
    this.setState({
        warm_up_exercises: newArray,
    });
}

以上是我用来为练习添加持续时间的函数，我尝试执行 item.customDuration = item.customDuration + 30 但我只是在控制台中得到 NaN。

在我的映射函数中，自定义持续时间显示如下

<Text>{{ item.customDuration }}</Text>

几天来我一直在努力解决这个问题，非常感谢您的帮助。我想要实现的只是让它在我将值添加到数组时，它会更新该项目并且对其他项目没有影响。

提供更多上下文的附加代码：

My constructor:

constructor(props) {
  super(props) {
    warm_up_exercises: [],
    selected_warm_up_exercises: [],
    repsValue: 0,
    setsValue: 0,
    restValue: 0,
    workoutStoreType: "",
    customDuration: 60,
  }
}
Were I call the function: 

<TouchableOpacity onPress={() => this.addDuration(item, index)}>
   <AntDesign name="pluscircle" size={22} color={Colours.type.primary_colour}  />
</TouchableOpacity>

Answer 1

首先，您没有正确初始化您的状态。它应该是一个对象，其中的练习数组为属性。这样写：

constructor(props) {
  super(props) {
    this.state = {
     exercises: [],
     repsValue: 0,
     setsValue: 0,
     restValue: 0,
     workoutStoreType: "",
     customDuration: 60,
    }
  }
}

每次增加状态时，您不仅在改变它，而且还为每个实体设置了 customDuration。问题出在这里：

customDuration: this.state.customDuration = this.state.customDuration + 30

为了正确执行，您只需要写：

customDuration: this.state.customDuration + 30

然后，要增加状态，您应该单独进行：

this.setState({
        exercises: newArray,
        customDuration: this.state.customDuration + 30
    });

如果您需要为每个项目设置 customDuration，您还需要以相同的方式更改状态，但有一点不同：

addDuration(item, index) {
    let newArray = [...this.state.exercises]
    newArray[index] = {
        ...newArray[index],
        customDuration: newArray[index].customDuration ? newArray[index].customDuration + 30 : 90,
        storeValues: true,
        workoutStoreType: 'duration',
    };
    this.setState({
        exercises: newArray,
    });
}

然后从初始状态中删除 customDuration。这样你将递增 30 并在第一次递增时输入 90

React Native - 无法单独更新项目内的新状态

React Native - Unable to update a new state inside items individually

arrays

mapping

increment

reactjs

react-native