Reactjs TypeScript React setState不工作

我有一个输入如下的组件

import * as React from 'react'

import { InputNumber, Button } from 'antd'

interface IProps {
  value: number
}

interface IState {
  value: number
}

class ConfirmInput extends React.Component<IProps, IState> {
  public readonly state = {
    value: 0
  }

  static getDerivedStateFromProps = ({ value }: IProps) => ({ value })

  public render () {
    return (
      <div>
        <InputNumber
          value={this.state.value}
          formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
          parser={(value): any => value && value.replace(/\$\s?|(,*)/g, '')}
          onChange={(value: number) => {
            console.log('value', value)
            this.setState({ value })
          }}
        />
        <Button
          onClick={() => console.log('this.state.value', this.state.value)}
          type="primary"
        >
          Bid
        </Button>
      </div>
    )
  }
}

export default ConfirmInput

import*作为来自“React”的React
从“antd”导入{InputNumber，Button}
接口IProps{
值：数字
}
界面状态{
值：数字
}
类ConfirmInput扩展了React.Component{
公共只读状态={
数值：0
}
静态getDerivedStateFromProps=（{value}:IProps）=>（{value}）
公开渲染（）{
返回(
`$${value}`.replace（/\B（？=（\d{3}）+（？！\d））/g，'，'）}
parser={（value）：any=>value&&value.replace（/\$\s？|（，*）/g，，）}
onChange={（值：number）=>{
console.log（'value'，value）
this.setState（{value}）
}}
/>
console.log（'this.state.value'，this.state.value）}
type=“主要”
>
投标
)
}
}
导出默认确认输出

在

InputNumber

上，我有一个on change，它将一个数字作为一个值，但是

this.setState

不会更改该值。 没有编译器错误，类型的一切似乎都正常。

---

这里缺少什么？

您需要将原始值存储在状态中，以便您的

getDerivedStateFromProps

实现只能在道具更改时覆盖当前值。这应该是可行的（未经测试）：

interface-IState{
值：数字
origValue:number
}
类ConfirmInput扩展了React.Component{
// ...
静态getDerivedStateFromProps=（props:IProps，state:IState）=>
（props.value！=state.origValue？{origValue:props.value，value:props.value}:{}）
// ...
}

使用setstate回调函数打印console对象，查看该对象是否已更新。您的

getDerivedStateFromProps

方法将覆盖来自props的状态。你想达到什么目的？@ImeshChandrasiriyup@MattMcCutchen我想将

onConfirm

函数作为道具传递，然后单击按钮将状态值传递给它。组件也从道具中获取其初始值。如果状态中的数字已更改，然后道具中的数字更改，会发生什么情况？你重置状态了吗？这个问题的答案将决定您需要在

getDerivedStateFromProps

方法中编写什么。

interface IState {
  value: number
  origValue: number
}

class ConfirmInput extends React.Component<IProps, IState> {
  // ...
  static getDerivedStateFromProps = (props: IProps, state: IState) =>
    (props.value != state.origValue ? { origValue: props.value, value: props.value } : {})
  // ...
}