组件安装期间缓存了图像

Question

我正在尝试缓存从我的api获取其URL的图像，以便在api加载且图像不显示时看不到imageview背景

我正在async componentDidMount内调用此函数

 async getData(){

    this.setState({isLoading: true})
    fetch('https://news119.herokuapp.com/getData')
      .then((response) => response.json())
      .then((responseJson) => {
        this.preload(responseJson.data)
        Toast.show('Refreshed');

        this.setState({
          currentIndex:0,
          dataSource: responseJson.data.sort((a,b)=>a.date<b.date),
        }, async function(){

          this.setState({

            isLoading: false,
            loaded:true,

          })
          AsyncStorage.setItem('ApiData',JSON.stringify(this.state.dataSource))
          AsyncStorage.setItem('POINTER', '0');

        });

      })
      .catch((error) =>{
        console.error(error);
      });
  }
//the preload function
    async  preload(data){
    console.log(data)
    await FastImage.preload([data.map((item)=>{uri:item.img.data})])

所使用的库是本机快速图像。

我可以在控制台中看到api数据，但是应用程序崩溃了，没有任何错误屏幕

如果您有更好的方法（但是我需要使用快速图像库），请也建议我！

Answer 1

promise中的'this'并不意味着组件为'this'，而是指promise功能为'this'。您需要在promise之前创建一个变量，以引用组件“ this”，并在promise中将其用于setState。

const component = this
fetch('..').then((result) => {component.setState({...})})