javascript - 重新渲染时 react 容器未被移除

Question

我有一个表单，如果状态中添加了任何错误，则会显示错误容器。有一个 handleSubmit 函数在发送 ajax 请求之前调用 validateForm 函数。

getInitialState: function () {
  return {
    formErrors: []
  };
},

render: function () {
  var errors = this.state.formErrors.map(function(error) {
    return (
      <li>
        {error}
      </li>
    );
  });

  var errorContainer = (
    <ul>
      {errors}
    </ul>
  );

在render函数的返回 block 中，有这一行用于显示错误容器:

{ this.state.formErrors.length == 0 ? '' : errorContainer }

在validateForm函数内部，我有这样的东西:

this.setState({ formErrors: [] });
var name = this.refs.name.getDOMNode().value.trim();

if (!name) {
  newErrors = this.state.formErrors;
  newErrors.push('Please add a name');
  this.setState({
    formErrors: newErrors
  });
}

这是有效的，因为它将错误添加到状态中的 formErrors 键中，但是如果我输入正确的内容，任何"new"错误都将在 View 中附加到 li 而不是绘制一个包含 N-1 个错误的新错误容器，在这种情况下我会填写名称字段。

这是一个jsfiddle:http://jsfiddle.net/ke4bmqny/7/

Answer 1

您的父表单组件控制错误状态，当您将其传递给错误显示子组件时，错误是该组件的 Prop 。请参阅Communicate Between Components .

将此行更改为驼峰式大小写:P

<GroupFormErrorComponent formErrors={this.state.formErrors} />

你的说法几乎是正确的，但你的错误显示组件没有也不应该需要将错误复制到另一个状态变量中。

var GroupFormErrorComponent = React.createClass({

    render: function () {
      var errors = this.props.formErrors.map(function(error, index) {
        return (
          <li key={index}>
            {error}
          </li>
        );
      });

      var errorContainer = (
        <div>
          <div>
            Sorry but there are errors:
          </div>
          {errors}
        </div>
      );

      return (
        <div>
          { this.props.formErrors.length == 0 ? '' : errorContainer }
        </div>
      );
    }
});

PS 只是关于您添加到 js fiddle 的 DOMReady 内容的一点提示 - 您不需要它，只需将 <script> html 下面的部分(在 <div id='form'></div> 之下)，它将准备就绪。

更新的 fiddle :http://jsfiddle.net/dL0uj9oc/3/