3

设置

在我的项目中，我使用了很多库，但对于这种情况，我认为这些是相关的：redux-form、material-ui和parse。

在我的应用程序中，我有一个如下所示的表单组件：

class ObjectForm {

  render() {
    const { fields: { field }, handleSubmit, submitting } = this.props;

    return (
      <form onSubmit={handleSubmit}>
        <TextField hintText="Hint Text" {...field} />
        <RaisedButton label="Send" type="submit" disabled={submitting} />
      </form>
    );
  }

}

由容器包裹，例如：

function mapStateToProps(state) {
  const { object } = state;
  return {
    object,
    initialValues: {
      field: object.get('field'),
    },
    onSubmit: data => {
      return object.save({
        field: data.field,
      });
    },
  };
}

export default reduxForm({
  form: 'objectForm',
  fields: [
    'field',
  ],
}, mapStateToProps)(ObjectForm);

问题

问题是，当表单变脏时（我更改了输入中的值），我收到此错误：

Uncaught Invariant Violation: traverseParentPath(...): Cannot traverse from and to the same ID, ``.

除此之外，解析对象实际上被保存了，但是在保存结束之前按钮不会禁用。

如果我只是再次提交表单，而不更改任何值，那么一切正常。

什么可能导致它

到目前为止，我可以找到 3 段代码，如果将其删除，错误就会消失！

第一个是提交按钮的disabled属性。卸下disabled={submitting}零件，使错误消失，但随后我错过了视觉反馈。更新：如果我删除disabled属性，但使用submitting属性有条件地显示加载指示器，则不会引发错误，但指示器也不会显示（尽管如果表单是干净的，它确实会显示）。

二是不要将initialValuesprop发送到reduxForm。删除initialValues: {...}也会使错误消失。

最后但并非最不重要的一点是，不为解析对象属性设置新值也会使错误消失。只需从调用中删除参数object.save，一切正常。

帮助！

因为这个，我挣扎了好几天，我没有想法。

调用堆栈

在此处输入图像描述

4

1 回答 1

5

我遇到了同样的错误，并通过进一步查看调用堆栈找到了根本原因：

在此处输入图像描述

“类型”和“道具”信息将我引向了我编写的一小段代码，无论出于何种原因，它都没有通过反应得到很好的管理：

<textPath
 ref={(node) => {
        node && node.setAttribute("startOffset", '50%')
      }}
 >
   {text}
</textPath>

注释掉 ref 为我修复了它：

<textPath
// ref={(node) => {
//        node && node.setAttribute("startOffset", '50%')
//      }}
 >
   {text}
</textPath>

对我来说，解决它可能意味着迁移到完全支持 svg 标签的 React 15，我不必依赖 ref hack。我不确定在你的情况下会有什么修复，但我想我会分享我的场景以防它帮助任何人。

干杯，托马斯

于 2016-03-10T21:45:09.060 回答