Javascript 使用debounce将反应状态同步到流星收集

我的Meteor+React应用程序中有一个文本框。我想将其值同步到Mongo集合。但是，我不想在每次击键后更新集合，只在用户停止键入几秒钟后更新

my

render（）

函数中的文本框如下所示：

<input type="text" ref="answer" onChange={this.onChange} value={this.state.someValue} />

我将文本框值存储在

this.state

中，而不是

this.data

，因为

this.data

反映了Mongo集合，该集合可能尚未更新

到目前为止，所有这些都有效

问题：

如果其他客户端更新了集合，我希望文本框显示更新的值。为此，我必须在

getMeteorData（）

函数内更新

this.state

，但这是不允许的，我得到一个错误：“在getMeteorData内调用setState可能导致无限循环”

现在我有一个解决方法，手动更新

componentDidMount（）

和

getMeteorData（）

中的文本框值，但这感觉有点黑客味，我一点也不喜欢

---

有更好的方法吗？如果我保证我会成为一个好孩子，表现得很好，我可以强制更新

getMeteorData（）

内部的状态吗？

我会彻底摆脱

getMeteorData

，转而使用它。数据流在大多数情况下都变得清晰和简单，包括这个特定的案例。来了

首先，创建一个容器来获取数据

export default theContainer = createContainer(() => {
  // Subscribe to the publication which publishes the data.
  const subscription = Meteor.subscribe(...);
  // Derive the data for the input box and form the props to pass down.
  const props = {
    answer: getAnswer(subscription)
  };
  return props;
}, theComponent);

container

充当容器组件，并通过props将包含的数据传输到呈现组件

component

。请注意，赋予

createContainer

的函数是响应的，这意味着该函数中对反应数据源的更改会触发重新运行，并导致组件

的重新启动

现在我们都武装起来了。由于Mongo集合（Minimongo）中的数据通过传递下来的道具进行同步，
组件
通过道具转换知道同步

export default class theComponent extends React.Component {
  ...

  componentWillReceiveProps(nextProps) {
    if (this.props.answer !== nextProps.answer) {
      this.setState({
        answer: nextProps.answer
      });
    }
  }

  render() {
    return <input value={this.state.answer} onChange={this.onChange} />;
  }
}

导出组件扩展React.Component的默认类{
...
组件将接收道具（下一步）{
if（this.props.answer！==nextrops.answer）{
这是我的国家({
回答：nextrops.answer
});
}
}
render（）{
返回；
}
}

发生这种转换时，即将出现的值将更新为状态，并且此受控组件将基于更新的新值呈现输入

另一方面，当用户开始键入时，更改处理程序
this.onChange
将用户的输入更新为每个按键的状态，因为这是一个受控组件。但是，处理程序仅在预设的持续时间已过以保存数据传输时才更新Mongo集合（同样，Minimongo）