仅在一个变量上设置状态答案

【问题标题】：setState on only one variable仅在一个变量上设置状态
【发布时间】：2019-08-10 22:50:59
【问题描述】：

我有一个带有状态的本地应用程序：

this.state={
        nameOne:"team 1",
        nameTwo:"team 2",
        pointsForEvents:{
            lap: 1,
            homeRun: 5,
            lyre: 3,
            oneHandCatch: 5,
            burned: 1,
            burnOut: 10,
        }
    }

那我要更新pointsForEvents中的变量：

<TextInput
        keyboardType="number-pad"
        onChangeText={(lyre) =>{lyre = parseInt(lyre); this.setState({pointsForEvents:{lyre}})}}
        value={this.state.pointsForEvents.lyre+""}
    />

但是 setState 也会更新“pointsForEvents”中的其他变量，并且由于未指定值，因此将它们设置为未定义。如何只更新这一个值。

PS：对象中变量的正确词汇是什么（就像组件是其子组件的父组件）。

【问题讨论】：

stackoverflow.com/questions/41100901/…
您必须使用Object.assign() 将pointsForEvents 对象设置为自身+ 任何更改。也可以使用spread operator 例如pointsForEvents : {...this.state.pointsForEvents, lyre: 4}

标签： javascript reactjs react-native object setstate

【解决方案1】：

在您的代码中，您实际上将pointsForEvents 设置为一个新值，这是一个仅包含一个键lyre 的对象，因此其他先前指定的键不再可用并解析为undefined。如果您想保留对象中的其他键并且只更新键lyre，那么您必须复制旧对象，仅更新一个键并使用此对象设置pointsForEvents 的状态。

可以使用扩展运算符实现对象的复制，如答案所示。因此，以下代码创建了一个新对象，其中包含 pointsForEvents 的所有键加上更新后的键 lyre 及其给定值，这是您要设置为状态的对象。在这种情况下，lyre 被插入到对象中，但由于它已经存在，它只会被更新。

{...this.state.pointsForEvents, lyre}

【讨论】：

【解决方案2】：

您可以使用spread 运算符，如下所示：

onChangeText = {
  (lyre) => {
    lyre = parseInt(lyre);
    this.setState({
      pointsForEvents: {
        ...this.state.pointsForEvents,
        lyre,
      }
    })
  }
}

其实这个选项会更好：

onChangeText = {
  (lyre) => {
    lyre = parseInt(lyre);
    this.setState((state) => ({
      pointsForEvents: {
        ...state.pointsForEvents,
        lyre,
      }
    }))
  }
}

第二个选项更好的原因是因为this.setState 不会马上更新状态，所以你可能会看到一些异常。

【讨论】：