uncaught Invariant Violation:traverseParentPath(...):无法遍历和转移到相同的ID,``

Question

设置

在我的项目中,我使用了很多库,但对于这种情况,我认为这些是相关的: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: {...}也会使错误消失.

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

救命!

由于这个原因,我已经挣扎了几天,我没有想法.

调用堆栈

Answer 1

我遇到了同样的错误,通过查看callstack进一步找到了根本原因:

"类型"和"道具"信息让我看到了我编写的这一小段代码,无论出于何种原因,这些代码都没有通过反应以一种很好的方式进行管理:

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

评论出来的ref为我修好了:

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

对我来说,解决它可能意味着转移到React 15,其中完全支持svg标签,我不必依赖于ref hack.我不确定你的情况会有什么修复,但我想我会分享我的情景以防万一.

干杯,托马斯