Reactネイティブフェッチ状態は更新されません。

Question

Fetch APIを使用して反応ネイティブで、これは約束が完了した後でuiを更新しません。

私たちが画面に触れると（イエス、正しいデータでuiを更新する）約束を解決することができます。

私たちはアキシャル（https://github.com/mzabriskie/axios）を使用しており、問題を解決しています。

ここ

コードです：

製品-service.js

export class ProductsService { 
    constructor() { 
    } 

    getProductDetail(id) { 
     let url = 'http://myservice/product-detail/' + id; 
     return fetch(url) 
      .then((response) => response.json()); 
    } 
} 

私-component.js

export class MyComponent extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      product: {} 
     }; 
    } 

    componentDidMount() { 
     let productService = new ProductsService(); 
     productService.getProductDetail(1) 
      .then((productDetail) => { 
       console.log('updateProduct: ', productDetail); 
       this.setState({ 
        product: productDetail 
       }); 
      }) 
      .catch((error) => { 
       console.error(error); 
      }); 
    } 

    render() { 
     return (
      <View> 
       <Text>{this.state.product.name}</Text> 
      </View> 
     ); 
    } 
} 

我々はフェッチを使用すると、製品の名前が表示された場合にのみ、デバイスの画面に触れます。 Axiosを使うとうまくいきます。

これはバグですか？

環境：Windowsの10、Androidの6、私が使用していないネイティブ0.31

Answer 1

を反応させるのは、ネイティブ反応するが、ちょうど今、同じ問題を抱えていました。ものはthis.setState約束を解決するときは、コンポーネントを指していません。

フェッチ私はVAR

const thiz = this; 

上このを保存し、その後

thiz.setState({}); 

状態を設定したり、thizに関数をバインドすることができthiz VAR を使用呼び出す前

then((function(){ 
    this.setState({}); 
}).bind(thiz))