2

Meteor + React アプリケーションにテキストボックスがあります。その値を Mongo コレクションに同期したいと考えています。ただし、キーストロークごとにコレクションを更新するのではなく、ユーザーが数秒間入力を停止した場合にのみ更新します。

私のrender()関数のテキストボックスは次のようになります。

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

まだ更新されていない可能性があるMongoコレクションを反映しているため、this.state代わりにテキストボックスの値を保存します。this.datathis.data

これまでのところ、これはすべて機能します。

問題：

別のクライアントがコレクションを更新した場合、テキスト ボックスに更新された値を表示する必要があります。このために、関数this.state内で更新する必要がありますが、それは許可されておらず、エラーが発生します: 「getMeteorData 内で setState を呼び出すと、無限ループが発生する可能性があります」。getMeteorData()

現在、 と のテキストボックスの値を手動で更新する回避策がありますが、componentDidMount()ハックgetMeteorData()のように感じられ、まったく気に入りません。

これを行うより良い方法はありますか？getMeteorData()私が良い子になり、礼儀正しく振る舞うと約束した場合、内部の状態の更新を強制することはできますか?

4

1 に答える 1

1

私はgetMeteorDataまったく取り除かれ、に変わりcreateContainerます。この特定のケースを含め、ほとんどの場合、データ フローは明確かつ単純になります。ここに行きます。

まず、データを取得するためのコンテナーを作成します。

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);

theContainertheComponentコンテナー コンポーネントとして機能し、含まれているデータをprops によってプレゼンテーション コンポーネントに転送します。に指定された関数はレスポンシブであることに注意してください。つまり、その関数createContainerでリアクティブ データ ソースを変更すると、再実行がトリガーされ、 が再レンダリングされtheComponentます。

今では、私たちは皆武装しています。Mongo コレクション (正確には Minimongo) 内のデータは、渡された props によって同期されるため、propstheComponentトランジションによる同期を認識します。

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} />;
  }
}

このような遷移が発生している間、次の値は状態に更新され、この制御されたコンポーネントは更新された新しい値に基づいて入力をレンダリングします。

一方、ユーザーが入力を開始すると、変更ハンドラーthis.onChangeは、これが制御されたコンポーネントであるため、キーストロークごとにユーザーの入力を状態に更新します。ただし、ハンドラーは、データ転送を保存するために事前に設定された期間が経過した場合にのみ、Mongo コレクション (ここでも正確には Minimongo) を更新します。

于 2016-07-09T09:17:46.103 に答える