重新渲染会蒸发std：accounts-ui的<accounts.ui.loginform>？

Question

[更新标题以反映当前对此错误的研究。]

如何修复此错误？

我真的不确定这里发生了什么。当我点击＆＃34; DraftJS＆＃34; contentEditable - <Accounts.ui.LoginForm />立即消失。我没有 模糊 的想法。

演示：

要查看当前状态的错误：

转到：http://draftjsmeteor.autoschematic.com/

要在您自己的开发环境中复制问题：

1. 克隆此存储库：https://github.com/JeremyIglehart/DraftJSMeteor
2. 创建settings-development.json文件（您可以将其留空）
3. 使用npm start
运行

主要问题：

有谁知道为什么DraftJS会杀死<Accounts.ui.LoginForm />？

现在研究这个问题两天之后，我怀疑问题是隐藏在<Accounts.ui.LoginForm />如何做某事的地方 - 也许是在他们的STATES API中？我真的很困惑。任何帮助都会非常感激。

我排除的问题：

1. 这不是Session Variable问题。 DraftJS没有使用它们 - 事实上，就我所能检测到的那样，现在没有使用会话变量（使用Meteor Toys）（谢谢@mattsouth）
2. 这不是DraftJS以某种方式杀死页面。从方程中删除DraftJS时，问题仍然存在于表单并重新加载React。 （谢谢@wursttheke）
3. 问题不在zetoff:accounts-material-ui中 - 我删除了包，问题仍然存在。

在我看来，这个问题与Meteor或React没有任何关系。

我现在正在寻找解决此问题的方法：

1. 与std:accounts-ui
有关
2. 我不知道还能在哪里看。基于上面的gif演示，您可以看到className accounts-ui的div正好渲染 - 在单击DraftJS contentEditable区域后，此组件内的某些内容会中断。

追踪此错误的问题：

我已经创建了三个问题来尝试跟踪它：

打开

• std:accounts-ui:Issue #96
• （我也在Meteor Forums上提到了这一点）

闭

• accounts-material-ui:Issue #26（已移除的包，错误仍然存​​在）
• DraftJS＆＃39; Github Issue #962（从等式中删除DraftJS，bug仍然存在）

找到解决方案后，我会更新我到处发布的所有问题，论坛和问题。

Answer 1

将错误放入“jar”

这不能回答这个问题，但它确实以一种半可接受的方式解决了这个问题。

问题仍然存在，这是一个错误 - 或者这是React组件应该采取的行为吗？

好的，所以这是一场漫长的战斗的结束，试图理解我认为这个反应组件的某种 奇怪的 行为。

我们found out later，任何类型的“重新渲染”都会导致这个反应组件“失去它的状态”而只是破坏。

<div id="parent">
  <div id="child1"></div>
  <div id="child2"></div>
</div>

好的，任何类型的重新渲染都会导致此组件失败。

我在github上更新了这个问题，然后上床睡觉了React / Meteor代码的噩梦（我知道如果你读过这篇文章的话，你也去过那里）。

早上我从find this little gift醒来Sean。

基本上要打破它。如果你从绘制DraftJS组件的同一组件中取出import React, { Component } from 'react' import { Accounts, STATES } from 'meteor/std:accounts-ui'; class MyEditor extends Component { constructor(props) { super(props) } render() { return ( <div> <button onClick={() => this.forceUpdate()}>Rerender</button> <Accounts.ui.LoginForm /> </div> ) } } export default MyEditor; - 那么它将如何“保护”它不被重新渲染。基本上将bug隔离到一个不会影响应用程序的角落。

以下是代码：

原始的“破损”代码<Accounts.ui.LoginForm />住在DraftJS <Accounts.ui.LoginForm />旁边

<Editor />

然后肖恩把代码拿出来并分成三个步骤分成各自的组件：

<强> 1。已从// Imports class MyEditor extends Component { // Other component stuff return ( <div className="editor-container"> <h1>DraftJS and Meteor Editor:</h1> <IconButton onClick={this._onBoldClick.bind(this)} touch={true} tooltip="Format Bold" tooltipPosition="top-right"> <FontIcon className="material-icons" style={iconStyles}>format_bold</FontIcon> </IconButton> <Editor editorState={this.state.editorState} onChange={this.onChange} handleKeyCommand={this.handleKeyCommand.bind(this)} /> <RaisedButton label="Log Editor State to Console" onClick={this.logState.bind(this)} primary={true} style={buttonStyle} /> </div> <Accounts.ui.LoginForm /> <p>This is a test - do I stay?</p> ) // Exports

中删除了<Accounts.ui.LoginForm />

<MyEditor />

<强> 2。创建了// Imports class MyEditor extends Component { // Other component stuff return ( <div className="editor-container"> <h1>DraftJS and Meteor Editor:</h1> <IconButton onClick={this._onBoldClick.bind(this)} touch={true} tooltip="Format Bold" tooltipPosition="top-right"> <FontIcon className="material-icons" style={iconStyles}>format_bold</FontIcon> </IconButton> <Editor editorState={this.state.editorState} onChange={this.onChange} handleKeyCommand={this.handleKeyCommand.bind(this)} /> <RaisedButton label="Log Editor State to Console" onClick={this.logState.bind(this)} primary={true} style={buttonStyle} /> </div> ) // Exports 组件：

<LogIn />

第3。然后从父// Imports class LogIn extends Component { constructor(props) { super(props) } render() { return ( <div className="login-container"> <Accounts.ui.LoginForm /> <p>This is a test - do I stay?</p> </div> ) } } // Exports 组件调用两个：

<Home />

但是现在，我有这个问题......这实际上是一个错误，或者这个class Home extends Component { render () { return ( <div> <MyEditor /> <LogIn /> </div> ) } } 组件是否正常运行？

提出这个问题的另一种方法可能是 - 这是反应组件的正常行为，还是应该构建为处理任意重新渲染而不会完全崩溃？