获取变量"undefined"值会在反应本机中获取响应？请？

Question

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, {
  Component,
} from 'react';
import {
  AppRegistry,
  Image,
  ListView,
  StyleSheet,
  Text,
  View,
} from 'react-native';
var REQUEST_URL = 'https://api.themoviedb.org/3/movie/popular?api_key=a667a62ffce29c5d1c5211e316ae43f6';
var REQUEST_URL_BASE_IMG = 'https://image.tmdb.org/t/p/w154/'
class Movies extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
    };
    var cast = "";
  }
  componentDidMount() {
    this.fetchData(); //1st collection pulled
  }
  fetchData(){
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(responseData.results),
          loaded: true,
        });
      })
      .done();
  }
  render() {
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderMovie}
        style={styles.listView}
      />
    );
  }
  renderLoadingView() {
    return (
      <View style={styles.container}>
        <Text>
          Loading movies...
        </Text>
      </View>
    );
  }
// fetchData2(movie){
//     fetch('https://api.themoviedb.org/3/movie/'+movie.id+'/credits?api_key=a667a62ffce29c5d1c5211e316ae43f6')
//       .then((response) => response.json())
//       .then((responseJson) => {
//         cast: responseJson.cast;
//       })
//       .catch((error) => {
//         console.error(error);
//       });
// }
  renderMovie(movie,arr) {
                 var arr = [];
                 // I want the cast variable to be displayed on the screen. It is coming either undefined or prints "s1" which indicates no data.
                 fetch('https://api.themoviedb.org/3/movie/'+movie.id+'/credits?api_key=a667a62ffce29c5d1c5211e316ae43f6')
                            .then((response) => response.json())
                            .then((responseJson) => {
                              //cast: responseJson.cast;
                              //test = displaycast(responseJson.cast[0].name);
                              var cast = responseJson.cast[0].name;
                              console.log(cast);
                            })
                            .catch((error) => {
                              console.error(error);
                            });
//      fetch('https://api.themoviedb.org/3/movie/'+movie.id+'/credits?api_key=a667a62ffce29c5d1c5211e316ae43f6')
//         .then((response) => response.json())
//         .then((responseJson) => {
//           this.setState({
//            cast: responseJson.cast,
//            });
//         })
//         .catch((error) => {
//           console.error(error);
//         });
    return (
      <View style={styles.container}>
        <Image
          source={{uri: 'https://image.tmdb.org/t/p/w92/'+ movie.poster_path.replace(///g,"")}}
          style={styles.thumbnail}
        />
        <View style={styles.rightContainer}>
          <Text style={styles.title}>{movie.title}</Text>
          <Text style={styles.year}>{cast}</Text>
        </View>
      </View>
    );
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  rightContainer: {
    flex: 1,
  },
  title: {
    fontSize: 20,
    marginBottom: 8,
    textAlign: 'center',
  },
  year: {
    textAlign: 'center',
  },
  thumbnail: {
    width: 53,
    height: 81,
  },
  listView: {
    paddingTop: 20,
    backgroundColor: '#F5FCFF',
  },
});
AppRegistry.registerComponent('Movies', () => Movies);

这是我的代码。我主要关心的是，我从renderMovie内部的fetchData中完美地获得响应并将其存储在转换变量中。但是如果我尝试在获取之外访问强制变量。它显示未定义或空字符串。

之前没有进行此获取的全部意义是因为我想使用第一个获取操作的获取响应来获取 move.id 并在第二个获取请求中使用它以获取更多详细信息。

Answer 1

这是因为JavaScript是异步的。我建议做一些类似于其他获取的操作，并设置加载状态以了解何时获取了投射并使用它来渲染。