ReactJs更新对象中数组索引的bug

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]


              }
          }))
      } 
}