2

ここで何が間違っているのかわかりません。API 呼び出しを開始できるように、いくつかの値の状態を変更する関数をトリガーするイベントがあります。ただし、関数を初めて実行するときは、状態は変化しません。関数が 2 回目に実行されると、前回の実行からの状態変更が設定されます。この遅延の原因は何ですか?

以下に示すようhandleFilterChangeに、イベントから値を受け取ります。値が適切に受信されていることを確認できます。ただし、設定された直後に状態の値を確認すると、未定義であることがわかります。イベントが2回目に来るとき。ただし、元の状態の変更が発生したことがわかりますが、2 番目の状態の変更は発生していません。では、実際に状態を設定するために setState を 2 回呼び出す必要があるのはなぜでしょうか。

var GridView = React.createClass({
  getInitialState: function() {
    window.addEventListener("scroll", this.handleScroll);
    return {
      data: [],
      page: 0,      //for pagination
      loadingFlag: false,
    };
    },

  getMainFeed: function() {

...

 }, //end function
 getFilteredItems: function() {
  ...

}, //end function
  componentWillMount: function() {

  },
  listenForFilterChange: function() {
    window.addEventListener("selectedFilterChange", this.handleFilterChange, false);
  },
  componentWillUnmount: function() {
    window.removeEventListener("selectedFilterChange", this.handleFilterChange, false);
  },
  handleFilterChange: function(filter) {
   //alert(filter.detail.filterType);
   //Convert Data for getFilteredItems
   //(EventType, Category, Buy, Inspiration) {
   switch (filter.detail.filterType) {
     //alert(filter.detail.filterType);
    case 'category':
      this.setState({
        itemCategory: filter.detail.filterSelected,
      });
      break;
    case 'event':
      this.setState({
        eventType: filter.detail.filterSelected,
      });
      break;
    case 'type':
      if (0){
        this.setState({
          filterBuy: 1,
          filterInspiration: 0,
        });
      }
      if (1){
        this.setState({
          filterBuy: 0,
          filterInspiration: 1,
        });
      }
      if (2){
        this.setState({
          filterBuy: 1,
          filterInspiration: 1,
        });
      }
      break;
    case 'trending':
      this.setState({
        itemCategory: filter.detail.filterSelected,
      });
      break;
   }

   this.getFilteredItems();
 },
  componentDidMount: function() {
    this.listenForFilterChange();
...
  },
  handleScroll:function(e){
...
  },
  componentDidUpdate: function() {
...
  },
  render: function() {
      return (
        <div id="feed-container-inner">
          <GridMain data={this.state.data} />
        </div>

      );
    }
  });
4

2 に答える 2

2

setStateは非同期であるため、変更はすぐに状態に反映されません。

setState() はすぐに this.state を変更しませんが、保留中の状態遷移を作成します。このメソッドを呼び出した後に this.state にアクセスすると、既存の値が返される可能性があります。

状態を確認する必要がある場合、または状態の変化に基づいてロジックを実行する必要がある場合は、ここで説明されているようにコールバック引数を使用します。

于 2015-08-13T08:37:05.850 に答える
0

setState を 2 回呼び出す必要はありません。あなたのコードを読んで何が間違っているのか正確に推測することはできませんが、私はこれをアドバイスすることができます:

  1. その内容を知りたい場合は、 render関数で状態を Console.log に記録します。
  2. イベントの内容を再度確認します (どのケースがトリガーされ、実際にトリガーされるか)。3. 別の関数 (別の setState) が、handlefilterChange で設定したい状態をオーバーライドしていないかどうかを確認します。

私の賭けは、あなたのフィルターが正しい値を受け取っていないことです.最初に未定義のfilter.detail.filterSelectedを受け取り、次に定義された別の値を受け取っています.filter.detail.filterSelectedの内容を確認してください.

とにかく、あなたの問題は setState によるものではありませんが、あなたのデータからはかなり確信しています。

それが役に立ったかどうか教えてください

于 2015-08-13T05:00:56.527 に答える