ReactJs 错误更新对象中的数组索引

Question

我想根据用户在输入字段中的更改更改索引 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 函数应该根据类型更改 TOTAL_ASSETS 的索引 0 或索引 1。类型是输入字段的id。

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

Answer 1

在 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]


              }
          }))
      } 
}

ReactJs 错误更新对象中的数组索引

ReactJs bug to update array index in object

setstate

reactjs