Question

如果有任何错误添加到状态，我有一个显示错误容器的表单。在通过ajax请求发送之前，有一个handleSubmit函数调用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函数的返回块中，有一行显示错误容器：

{ 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键，但如果我输入正确的内容，任何“新”错误都会在视图中附加到{{1}而不是绘制一个带有N-1错误的新错误容器，就像在那个场景中我会填写名称字段一样。

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

Answer 1

您的父窗体组件控制错误状态，当您将其传递给错误显示子组件时，错误是该组件的道具。请参阅Communicate Between Components。

将此行更改为camel-case：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小提琴中的DOMReady东西的一点提示 - 你不需要它，而只是把<script>部分放在html下面（<div id='form'></div>下面）并且它将是准备好了。

更新了小提琴：http://jsfiddle.net/dL0uj9oc/3/

Answer 2

据我所知，没有'this.state.formErrors'被清空的情况。所以我会改为：

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

但如果你分享一个人们可以重现问题的jsfiddle会更好。

另一方面，您可能应该从州获取您的名称值，而不是从DOM（您获得名称输入值）中读取。

在重新渲染时反应容器没有被移除

2 个答案: