Question

我创建了InitializePhoneNumbersPanel：

class InitializePhoneNumbersPanel extends Component {
  constructor(props) {
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit(phoneNumbers) {
    const { dispatch, operatorId } = this.props;

    dispatch(updateOperatorData(operatorId, phoneNumbers, {include: 'phone_numbers'}));
  }

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

    console.log('\n... Render ...');
    console.log('phone_numbers <<<<< ', phone_numbers);

    if (_.isEmpty(phone_numbers)) {
      return (
        <div className={"fade in"}>
          Hello
        </div>
      )
    }

    return (
      <form onSubmit={handleSubmit(this.onSubmit)}>
        <div className="row">
          <div className="col-md-12">
            <ul className="list-unstyled m-b-0 clearfix">
              {phone_numbers && phone_numbers.map((phone, index) =>
                <PhoneNumbersPanelItem key={index} phone={phone} phone_numbers={phone_numbers}
                             index={index}/>
              )}
            </ul>

          </div>
        </div>
        <div className="row">
          <div className="col-md-12">
            <button type="button" className="btn btn-sm btn-success" onClick={event => {
                event.preventDefault();
                phone_numbers.addField();
              }}><i className="fa fa-plus"></i>
            </button>
          </div>
        </div>
        <hr/>
        <div className="row">
          <div className="col-md-12">
            <button type="submit" disabled={ submitting } className="btn btn-sm btn-success pull-right">
              Save
            </button>
          </div>
        </div>
      </form>
    )
  }
}

然后这个组件被Redux-form包装：

InitializePhoneNumbersPanel = reduxForm({
  form: 'phone-numbers-panel',
  fields
})(InitializePhoneNumbersPanel);

然后，所有内容都由connect方法包装，以便将来自Store的数据以Redux形式显示为字段：

function select(state) {
  return {
    initialValues: {
      phone_numbers: _.map(state.operators.items[state.operators.selectedOperator] && state.operators.items[state.operators.selectedOperator].phone_numbers, phoneId => {
        return state.phoneNumbers.items[phoneId];
      })
    },
    operatorId: state.operators.selectedOperator
  };
}

InitializePhoneNumbersPanel = connect(select)(InitializePhoneNumbersPanel);

错误是......

上面的代码正常工作但是在PhoneNumbersPanelItem组件中，来自“phone_numbers”变量的电话号码会重复。

当第一次没有错误发生操作页面（其电话号码显示使用PhoneNumbersPanelItem）时，如果我选择其他操作符，Route将改变，这意味着storeI中的operatorId参数将改变，这意味着操作符对象将改变，电话号码会有所不同......更改的数据会发送到此处的组件：

function select(state) {
  return {
    initialValues: {
      phone_numbers: _.map(state.operators.items[state.operators.selectedOperator] && state.operators.items[state.operators.selectedOperator].phone_numbers, phoneId => {
        return state.phoneNumbers.items[phoneId];
      })
    },
    operatorId: state.operators.selectedOperator
  };
}Operator
  };
}

InitializePhoneNumbersPanel = connect(select)(InitializePhoneNumbersPanel);

因此，如果所选运营商的电话号码数量少于前一运营商的电话号码，则会抛出错误

未捕获的不变违规：findComponentRoot（...，   .0.0.0.1.2.0.0.2.1.0.1.1.0.0.0。$ 1.0.0.0.0.1.1.0）：无法找到   元件。这可能意味着DOM意外地发生了变异（例如，   通过浏览器），通常是因为在使用时遗忘了   表，嵌套标签，如

，或者使用非SVG   父母中的元素。尝试检查。的子节点   具有反应ID的元素``。

据我所知，错误被抛出，因为一开始有3个电话号码，当我选择一个新的运营商时，电话的数量是2，而React似乎无法找到第三个数字的html代码，如没有创建此元素的新渲染

即使出现错误，一切正常。可能与另一个渲染反应理解状态已更新并重新呈现虚拟DOM

如果所有运营商的电话号码都相同，则无错误

如何修复此错误？有人遇到过这样的事吗？很奇怪，当我们切换到新路由时，React不明白虚拟DOM已经改变了。我将非常感谢这个问题的任何帮助/解决方案

Answer 1

我已尝试过多种方法让它在我的身上发挥作用。我有类似的问题。

显然问题在于按钮的类型。如果您使用type="button"

，ReactDOM会丢失

我删除了type="button"并在我的onClick处理程序上添加了event.preventDefault()，它对我有效。

Answer 2

我有一个非常相似的情景。我尝试了很多东西，唯一对我有用的是更新反应和反应到版本15.3.2（从0.14.2）。

如何修复错误Uncaught Invariant Violation：findComponentRoot（...？

2 个答案: