javascript - 重新渲染期间更新状态的 react 问题

Question

我有 2 个组件，一个 StaticComponent 和一个 InteractiveComponent。 StaticComponent 显示用户的信息。它有一个链接可以编辑信息。该链接有一个 onClick，可以触发 handleEditClick 函数。这会将 StaticComponent 替换为具有表单的 InteractiveComponent。

var StaticComponent = React.createClass({
  handleEditClick: function (event) {
    event.preventDefault();
    React.render(<InteractiveComponent user_info={this.props.user_info}  
                                       form_status={'form-to-be-sent'} />, 
                  document);
  },
})

InteractiveComponent 通过 props 设置 user_info 的状态。它也是将状态的 formSubmissionStatus 值指定为“form-to-be-sent”初始状态，再次来自 Prop 。该组件还有一个handleSubmit 函数，显然还有render 函数。

var InteractiveComponent = React.createClass({
  getInitialState: function() {
    return {
      user_info: JSON.parse(this.props.user_info),
      formSubmissionStatus: this.props.form_status
    };
  },

  handleSubmit: function(event, data) {
    // ...
  },

  render: function() {
    // ...
  }
});

渲染函数有一个在提交时调用handleSubmit的表单。它还分配一个 userInfo ，它将新的 props 设置为 props 中现有的 user_info 数据，或者状态的更新信息，具体取决于表单的提交状态。

如果状态设置为“form-to-be-sent”，则渲染函数还会渲染表单，否则将渲染 StaticComponent。这是因为它假设表单已提交。

render: function () {
  var profileForm = (
      <form ref="form" onSubmit={ this.handleSubmit }>
        <label>Your Name</label>
        <textarea id="user_name" defaultValue={this.state.user_info.name} ref='name' />
        <button className='greenbutton' type="submit">Update</button>
      </form>
    );

  var userInfo = this.state.formSubmissionStatus == 'form-to-be-sent' ? this.props.user_info : JSON.stringify(this.state.user_info);

  return (
    this.state.formSubmissionStatus == 'form-to-be-sent' ? profileForm : <StaticComponent user_info={userInfo} />
  );
}

handleSubmit 更新新关联数组中的用户信息，并向服务器执行 ajax POST 提交。在ajax调用之前，它会将用户信息的状态更新为最新数据，并更新formSubmissionStatus值。

handleSubmit: function(event, data) {
    event.preventDefault();

    var formData = $(this.refs.form.getDOMNode()).serialize(),
        latestUserInfo = JSON.parse(this.props.user_info),
        name = this.refs.name.getDOMNode().value.trim(),
        that = this;

    latestUserInfo['name'] = name;

    $.ajax({
      data: formData,
      dataType: "json",
      url: 'form-submit',
      type: "POST",
      beforeSend: function() {
        that.setState({
          user_info: latestUserInfo,
          formSubmissionStatus: 'form-already-submitted'
        });
      }
    });
  }

问题在于，handleSubmit 中的 formSubmissionStatus 值似乎没有正确更新。我可以单击“编辑”，填写表单，按“提交”，然后查看服务器上的新数据更新以及新 StaticComponent 中的新信息。但我似乎无法通过第二次单击编辑来再次加载表单。使用 webdev 工具，beforeSend 回调中的 setState 似乎未正确更新 formSubmissionStatus 状态。

Answer 1

第二次单击“编辑”时，React 渲染了一个交互式组件，它发现那里已经存在一个现有的 InteractiveComponent，因此它通过更新其 props 和重新渲染来重用它。

在您的示例中，更新其 Prop 并重新渲染不会改变其状态。 componentWillReceiveProps 有一个组件生命周期方法，它使您有机会将新的 Props 传输到状态。

因此，请在您的 interactiveComponent 上尝试类似的操作。

componentWillReceiveProps: function(nextProps) {
    this.setState({user_info: nextProps.user_info, formSubmissionStatus: nextProps.form_status});
}