setState только для одной переменной - PullRequest
Новая
       7

setState только для одной переменной

0 голосов
/ 20 марта 2019

У меня есть собственное приложение с состоянием: 

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 ", а так как значение не указано, для них установлено значение undefined.Как обновить только это одно значение.

PS: каков правильный словарь для переменной в объекте (как компоненты являются родителями своих дочерних компонентов).

Ответы [ 2 ]

2 голосов
/ 20 марта 2019

В вашем коде вы фактически устанавливаете pointsForEvents на новое значение, которое является объектом, содержащим только один ключ lyre, поэтому другие ранее указанные ключи больше не доступны и разрешаются на undefined. Если вы хотите сохранить другие ключи в объекте и обновить только ключ lyre, вам необходимо скопировать старый объект, обновить только один ключ и использовать этот объект для установки состояния pointsForEvents.

Копирование объектов может быть достигнуто с помощью оператора распространения, как показано в ответах. Таким образом, следующий код создает новый объект, содержащий все ключи pointsForEvents плюс обновленную лиру ключей с заданным значением, и это объект, который вы хотите установить в состояние. В этом случае lyre вставляется в объект, но поскольку он уже был там, он будет обновляться только. 

{...this.state.pointsForEvents, lyre}
1 голос
/ 20 марта 2019

Вы можете использовать оператор 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 не обновляет состояние сразу, поэтому вы можете увидеть некоторые аномалии.

...