は、私は本当に私が反応使用して<a href="https://github.github.io/fetch/" rel="nofollow noreferrer">fetch()</a> UIを開発するために、私はこれをやってしまったんだフェッチAPIとReactJS

Question

でforceUpdateを使用する必要がありますかこの

var Operators = React.createClass({ 

    getInitialState: function() { 
     return { 
      data: [{ "data": "Loading" }] 
     } 
    }, 

    componentDidMount: function() { 
     operatorsService.getOperatorsList(this); 
    }, 

    render: function() { 
     return (
      <div> 
       <Row > 
        <Col> 
         <DataTablesCustom data={this.state.data} /> 
        </Col> 
       </Row> 
      </div> 
     ); 
    } 
}); 

私はすでにthis questionを見ていた、とのコードは私のために動作しません。

これはうまく動作しますが、実際にforceUpdate()を使用する必要がありますか、コードを「クリーナー」にする方法がありますか？

EDIT：子コンポーネントにthis.setState({stuff: stuff}, this.function()});のように見えるsetStateがありました。 setStateをthis.setState({stuff: stuff},() => this.function()});に変更した後にforceUpdate()を削除できました。

Answer 1

あなたのコードが動作するように取得するには、サービスでこれをやろうとすることができる。

obj.setState.bind(obj)({ data: json }); 

しかし、あなたのサービスにコンポーネントオブジェクトを渡す必要はありません。間違いなく、それはあなたが物事を必要としないときに結合するだけの良い考えではありません。コンポーネントがデータをどうするかを決め、その後、あなたのサービスを呼び出してみましょう：

getOperatorsList: function() { 
    return fetch('http://x.x.x.x/operators.list', { 
     method: 'GET', 
     credentials: 'include' 
    }).then(function (response) { 
     return response.json() 
    }).then(function (json) { 
     if (json.statusCode === 3) { 
      cookieService.unsetCookie('sessId'); 
     } 
     return json; 
    }).catch(function (ex) { 
     console.log('parsing failed', ex); 
    }) 

} 

次に、あなたのコンポーネントで：

componentDidMount: function() { 
    operatorsService.getOperatorsList() 
    .then(function (json) { 
     this.setState({ data: json }); 
    }.bind(this)) 
}