Question

使用Fetch API on react native，这不会在承诺完成后更新ui。

当我们触摸屏幕时，我们意识到承诺会解决（是的，并用正确的数据更新ui）。

对于workarround，我们使用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());
    }
}

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

当我们使用fetch时，只有触摸设备屏幕时才会显示产品名称。当我们使用axios时，它可以工作。

这是一个错误？

环境：Windows 10，Android 6，React Native 0.31

Answer 1

我没有使用本机反应，但是，刚才遇到了同样的问题。当promise解析并不指向组件时，事情是 this.setState 。

在获取提醒之前，我将此存储在var

上

const thiz = this;

然后使用 thiz var来设置状态

thiz.setState({});

或者您可以将该功能绑定到 thiz

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

React Native fetch状态不更新

1 个答案: