即使通过渲染中的callvack，状态也不会更新

Question

我正在尝试从某个来源获取数据并将其存储在某个变量中。

但我遇到了状态未更新的错误。

 this.setState({imgLink: data.items[0].snippet.thumbnails.default.url},
  () =>
  {
   console.log(this.state.imgLink);
 });

我想在 render 方法中打印新值，但它什么也没显示。

Answer 1

import React,{Component} from 'react';
import {View,Text,TextInput,ScrollView,Image} from 
'react-native';
import { Icon } from 'react-native-elements';
import YTSearch from 'youtube-api-search';
import styles from './StatsStyle';

const API_KEY = '' // hided for stackoverflow ;
var query = '';
export default class StatsScreen extends Component
{

constructor(props)
{
super(props);

this.state = {
   term: '',
   imgLink: '',
   width: 0,
   height: 0,
   title: '',
   totalViews: 0,
   totalSubs: 0,
   totalVideos: 0 ,
   channelId : '' ,
   url: '',
}
};


fetchData = data => {

console.log('this is fetchData',data.items[0].statistics.subscriberCount);

 this.setState({imgLink: data.items[0].snippet.thumbnails.default.url},
  () =>
  {
   console.log('llllll',this.state.imgLink);
 });
 console.log('llllll',this.state.imgLink);

this.setState({width: data.items[0].snippet.thumbnails.default.url.width});

this.setState({height: data.items[0].snippet.thumbnails.default.url.height});

this.setState({title: data.items[0].snippet.title});


 this.setState({totalSubs: data.items[0].statistics.subscriberCount});


this.setState({totalViews: data.items[0].statistics.viewCount});

this.setState({totalVideos: data.items[0].statistics.videoCount});


}


updateSubscribers = response =>
{
  this.setState({totalSubs: 
response.items[0].statistics.subscriberCount});
}

onPressedButton = channelId =>
{
var url = 
'https://www.googleapis.com/youtube/v3/channels? 
 key='+API_KEY+'&id=' + channelId + 
 '&part=snippet,contentDetails,statistics';
 this.setState({url: url});
 return fetch(url)
 .then((response) =>
{ 
return response.json();
console.log("popo",response);
})
// fetchData(data);
.then((data) => {
this.fetchData(data);
console.log('lol',this.state.imgLink);
console.log('hello',this.state);
})
.catch((error) => {
 console.log(error);
})
//now fetching the response from the yt api again 
//and again
.setInterval(() =>
{
var url = 
'https://www.googleapis.com/youtube/v3/channels? 
key='+API_KEY+'o&id=' + channelId + 
'&part=statistics';
return fetch(url)
.then((response) =>
{
 return response.json()
})
.then((data) => {
 this.updateSubscribers(data)
 },0)

 .catch((error) => {
console.log(error);
});
});
}


render()
{

let{imgLink,totalSubs,totalViews,totalVideos,width,
height,title,channelId,videos,loading,term} = 
this.state;
return(
<View style = {styles.container}>

 <ScrollView>
<View style = {styles.results}>
<Image style = {

 {
width:width,height:height,
alignItems:'center',borderRadius:50 
,marginLeft:'auto',marginRight: 'auto',marginTop: 
30
}
} 
source = {{uri: imgLink}}/>

<Text style = {styles.title}>{title}</Text>

<Text style = {{fontSize: 40,fontWeight: 
'bold'}}>Subscribers</Text>
<Text style = {styles.subs}>{totalSubs}</Text>

<Text style = {{fontSize: 40,fontWeight: 
'bold'}}>TotalViews</Text>
<Text style = {styles.views}>{totalViews}</Text>

<Text style = {{fontSize: 40,fontWeight: 
'bold'}}>TotalVideos</Text>
<Text style = {styles.videos}>{totalVideos}</Text>

 </View>
</ScrollView>

</View>

);
}
}