Question

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

以下是代码的相关部分：

  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>
          );
      }
  }

以下是示例：http://jsbin.com/yawasoz/1/edit?html,js,output

如果你插入一个项目，然后点击＆＃34; LI＆＃34;元素，您将看到表单中的状态设置正确。但是，您无法在输入中编辑数据 - 当我打字时，文本保持不变。就像＆＃34; onChange＆＃34;方法不存在。这里发生了什么？我想我可能正在使用＆＃34; getDerivedStateFromProps＆＃34;不正确？

Answer 1

显然，这是最新版React中的一个错误（如https://www.reddit.com/r/reactjs/comments/8mslha/cant_update_form_that_is_based_on_state/dzq4zen所述），降级为16.3按预期工作：http://jsbin.com/wilahihuyu/1/edit

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

修改

基于对github的讨论，这不是一个错误，错误在代码中，版本16.4显而易见。以下是讨论：https://github.com/facebook/react/issues/12898#issuecomment-392035163

React.js - 无法更新基于状态的表单

1 个答案: