Reactjs 基于getimagesize的返回视图-反应本机

我有以下代码：

getPhoto(item) {

Image.getSize( 'http://api/people/' + item.id + '/photo', ( width, height ) =>
{
  this.setState({ imageWidth: width, imageHeight: height });
  console.log('http://api/people/' + item.id + '/photo', + ' ' +  'width: ' + width)
},(errorMsg) =>
{ 
  console.log('http://api/people/' + item.id + '/photo', + ' ' + ' errorMsg: ' + errorMsg.code);
  this.setState({ imageError: errorMsg.code });
});

//console.log('http://api/people/' + item.id + '/photo', + ' ' + ' errorMsg: ' + this.state.imageError + ' ' + ' errorMsgIncludes: ' + this.state.imageError.includes('ERCTERRORDOMAIN0'));

return (  
   <TouchableOpacity>
      <ListItem style={styles.listItem}>

        <FastImage
          style={styles.avatar}
          source={{
            uri: 'http://api/people/' + item.id + '/photo',
            priority: FastImage.priority.high,
          }}
          resizeMode={FastImage.resizeMode.strech}
        />

        <View style={styles.multiLineView} >
          <Text style={styles.name}>{item.id}</Text>
        </View>

      </ListItem>
    </TouchableOpacity>
)

getPhoto（项目）{
Image.getSize（'http://api/people/“+item.id+”/photo'，（宽度、高度）=>
{
this.setState（{imageWidth:width，imageHeight:height}）；
console.log（'http://api/people/'+item.id+/photo'，+'+'宽度：'+width）
}，（errorMsg）=>
{ 
console.log（'http://api/people/“+item.id+'/photo'，+'+'errorMsg:”+errorMsg.code）；
this.setState（{imageError:errorMsg.code}）；
});
//console.log（'http://api/people/“+item.id+/photo”，“++++”errorMsg:“+this.state.imageError++”“errorMsgIncludes:“+this.state.imageError.includes（'ERCTERRORDOMAIN0'）；
报税表（
{item.id}
)

}

这里的问题是setstate在成功和错误回调之外不会持久存在，因此我得到了不适当的结果

如何从这些回调函数中渲染视图

---

提前感谢您的帮助

我认为您应该稍微重构一下代码，并将get photo函数逻辑移到一个新组件上

export default class Item extends React.Component{
    constructor(props){
       super(props);
       this.state={imageWidth: 0, imageHeight: 0}
     }
   // make the call for get size inside component did mount
   componentDidMount(){
      let item = this.props.item;
     Image.getSize( 'http://api/people/' + item.id + '/photo', ( width, height 
       ) =>
      {
      this.setState({ imageWidth: width, imageHeight: height });
       console.log('http://api/people/' + item.id + '/photo', + ' ' +  'width: 
     ' + width)
      },(errorMsg) =>
      { 
        console.log('http://api/people/' + item.id + '/photo', + ' ' + ' errorMsg: ' + errorMsg.code);
        this.setState({ imageError: errorMsg.code });
      });
   }

   render(){
      // render the view you want here according to the component state
      switch(this.state.acondition){
         case 1:
         return a view or component you want ...
         etc ...
      }
   }
}

然后您可以调用组件并像这样传递项

import Item from './Item';

<Item item={item}/>

从“/Item”导入项目；