2016-08-24 2 views
1

Использование API-интерфейса Fetch при реагировании native, это не обновляет ui после обещанного обещания.Реагировать Наследственное состояние выборки не обновляется

Мы понимаем, что обещание разрешается, когда мы касаемся экрана (да, и обновляем ui с правильными данными).

Для работы на рабочем столе мы используем axios (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> 
     ); 
    } 
} 

Когда мы используем выборку, название продукта появляются только тогда, когда мы касаемся экрана устройства. Когда мы используем аксиомы, он работает.

Это ошибка?

Окружающая среда: Windows 10, Android 6, React Native 0,31

+0

Я думаю, что это ошибка RN fetch. – deju

ответ

2

Я не использую реагировать родной, но была такая же проблема только сейчас. Дело в том, что this.setState, когда обеременное решение не указывает на компонент.

Перед выборки называют я хранится это на вар

const thiz = this; 

, а затем использовали Thiz вар, чтобы установить состояние

thiz.setState({}); 

или вы могли бы связать функцию Thiz

then((function(){ 
    this.setState({}); 
}).bind(thiz)) 
Смежные вопросы