Javascript React.js-can'；t更新基于状态的表单

我正在尝试做一件基本的事情：插入数据，它被传递回主组件，并显示一个项目列表，可以在表单中单击和编辑

以下是代码的相关部分：

  class SimpleForm extends React.Component {

      constructor() {
          super();
          this.state = {
              id: null,
              firstName: ''
          };
      }

      static getDerivedStateFromProps(props, state) {
          if (props.user === null) return null;

          return {
              id: props.user.id,
              firstName: props.user.firstName
          }
      }


      handleChange = e => {
          const value = e.target.value;
          this.setState(prevState => {
              return {
                  firstName: value
              }
          });
      }

      handleSubmit = e => {
          e.preventDefault();
          const event = e.target;
          this.props.onAdd(this.state);

          this.setState(prevState => {
              return {
                  id: null,
                  firstName: ''
              };
          }, () => {
              event.reset();
          });
      }

      render() {
          const {
              firstName
          } = this.state;
          return ( <form onSubmit = {this.handleSubmit}>
              <input type = "text"
                  name = "firstName"
                  value = {firstName}
                  onChange = {this.handleChange} /> &nbsp; 
              <input type = "submit" value = "Submit" />
              </form>
          );
      }
  }

类SimpleForm扩展了React.Component{ 构造函数（）{ 超级（）； 此.state={ id:null， 名字：“” }; } 静态getDerivedStateFromProps（props，状态）{ if（props.user==null）返回null； 返回{ id:props.user.id， firstName:props.user.firstName } } handleChange=e=>{ 常量值=e.target.value； this.setState（prevState=>{ 返回{ 名字：value } }); } handleSubmit=e=>{ e、 预防默认值（）； 常数事件=e.目标； this.props.onAdd（this.state）； this.setState（prevState=>{ 返回{ id:null， 名字：“” }; }, () => { event.reset（）； }); } render（）{ 常数{ 名字 }=本州； 报税表（ ); } } 下面是一个例子：

如果插入一项，然后单击“LI”元素，您将看到表单中的状态设置正确。但是，您根本无法在输入中编辑数据-当我键入时，文本保持不变。就像“onChange”方法不存在一样。这是怎么回事？我认为我可能错误地使用了“getDerivedStateFromProps”？

显然，这是React最新版本中的一个bug（如本文所述），降级到16.3版可以正常工作：

编辑

---

基于对github的讨论，这不是一个bug，bug就在代码中，16.4版让它变得很明显。讨论如下：

您无法编辑它的原因是，一旦单击某个条目，它就会将this.state.firstName的值固定到props.user.firstName；这是一个逻辑问题。那么，在我的例子中，为状态设置值的正确方法是什么呢？

<script crossorigin src="https://unpkg.com/react@16.3/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16.3/umd/react-dom.development.js"></script>