ReactJs ошибка обновления индекса массива в объекте - PullRequest
Новая
       5

ReactJs ошибка обновления индекса массива в объекте

1 голос
/ 06 мая 2020

я хочу изменить индекс на основе изменения пользователем в поле ввода min_value или max_value

у меня это в состоянии 

sensitiveValues: {
   TOTAL_ASSETS: [0, 1416758841]
}

это мое поле ввода 

<NumberFormat
        className="grey-form input-padding"
        defaultValue={parseFloat(max_value).toFixed(0)}
        thousandSeparator={true}
        value={this.state.sensitiveValues[name] ? parseFloat(this.state.sensitiveValues[name][1]) : 0}
        onChange={this.amountInputChangeHandler}
        id={`${name}-max_value`}/>

и эта функция onChange, которая должна изменять индекс 0 или индекс 1 TOTAL_ASSETS в зависимости от типа. тип - это идентификатор поля ввода. 

amountInputChangeHandler = (e) => {
            let [key,type] = e.target.id.split('-')
            //key === TOTAL_ASSETS
            //type === min_value or max_value

            // We update first value in array for any key

            if(type==='min_value'){
                console.log('it goes to min_value')
                this.setState({
                        sensitiveValues: {
                            ...this.state.sensitiveValues,
                            [key]: [parseFloat(e.target.value.replace(/,/g, '')), this.state.sensitiveValues[key][0]] 
                        }
                })
            }
            // We update Second value in array for any key
            if(type==='max_value'){
            console.log('it goes to min_value')
                this.setState({
                        sensitiveValues: {
                            ...this.state.sensitiveValues,
                            [key]: [parseFloat(e.target.value.replace(/,/g, '')), this.state.sensitiveValues[key][1]] 
                        }
                })
        } 
}

, но всякий раз, когда я пытаюсь изменить значение из поля, он меняет как min_value, так и max_value

1 Ответ

0 голосов
/ 06 мая 2020

В amountInputChangeHandler, в зависимости от типа max_value или min_value, вам нужно обновить значение с индексом 0 или 1. Также используйте обратный вызов setState для выполнения таких обновлений.

Обратите внимание на порядок возвращаемых значений [key]: [value, prev.sensitiveValues[key]] и [key]: [prev.sensitiveValues[key], value] 

amountInputChangeHandler = (e) => {
      let [key,type] = e.target.id.split('-')
      const value = parseFloat(e.target.value.replace(/,/g, ''))
      //key === TOTAL_ASSETS
      //type === min_value or max_value

      // We update first value in array for any key

      if(type==='min_value'){
          console.log('it goes to min_value')
          this.setState(prev=> ({
              sensitiveValues: {
                  ...prev.sensitiveValues,
                  [key]: [value, prev.sensitiveValues[key][1]] 
              }
          }))
      }
      // We update Second value in array for any key
      if(type==='max_value'){
          console.log('it goes to max_value')
          this.setState(prev=> ({
              sensitiveValues: {
                  ...prev.sensitiveValues,

                  [key]: [prev.sensitiveValues[key][0], value]


              }
          }))
      } 
}
...