setState 只有一个变量

Question

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

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: 对象中变量的正确词汇是什么（就像组件是其子组件的父组件）。

Answer 1

您可以使用 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不会立即更新状态，因此您可能会看到一些异常情况。

Answer 2

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

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

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

setState 只有一个变量

setState on only one variable

javascript

object

setstate

reactjs

react-native