重新渲染 React 组件时输入值未重置

Question

我有一个显示模式的 React 组件。 第一次显示很好。 但是当我关闭并重新打开它时，它会“保存”输入值：渲染方法的代码是：

 render() {
    return (
      <>
        <Button
          type="primary"
          onClick={() => {
            this.setState({
                topup: 0,
                modalVisible: true
            });
          }}
        >
          Replace
        </Button>
        <Modal
          visible={this.state.modalVisible}
          onOk={this.onOk}
          onCancel={() => {
            this.setState({
                topup: 0,
                modalVisible: false
            });
          }}
        >
          <Form>
            <Row gutter={24}>
              <Col span={24}>
                <Descriptions>
                  <Descriptions.Item label="Topup">
                    <Input 
                      type="number"
                      defaultValue={this.state.topup}
                      onChange={value => {
                        console.log('value.target.value is ', value.target.value);
                        if (Number(value.target.value)) {
                          this.setState({
                            ...this.state,
                            topup: Number(value.target.value) 
                          });
                        } 
                      }}
                    />
                  </Descriptions.Item>
                </Descriptions>
              </Col>
            </Row>
          </Form>
        </Modal>
      </>
    );
  }

首次显示时， topup Input中的值为0，是正确的。 如果我更改为 10，然后关闭模式，我重置 state 所以充值为 0。当我单击按钮时，不知何故，输入仍然有 10。我可以在topup中看到充值属性为 0。什么可能继续？

Answer 1

1. 这可能是因为 Input 不受控制，因为您只提供默认值，所以如果您希望值始终来自 state，可以尝试使用 value 而不是 defaultValue。

2. 这与您的问题无关，但是如果您使用 class 组件的 this.setState 方法，则无需传播 this.state，因为您传递给 this.setState 的任何内容都将与当前的 Z9ED39E2EA931586B3EZEF58 合并。 Also using old state to create new state like that can lead to bugs, so if you ever need to use old state to generate new one (for example, you want to increment state variable), you should pass a function into this.setState:

this.setState((prevState)=>{
    return {
        value: prevState.value + 1
    };
});

这样，React 将正确处理您的 setState 并保证 prevState 在 setState 运行时是实际当前的 state。