Question

我的计划是从头部获取带有授权令牌的http请求中的字符串数组，然后使用该数组来决定要呈现的内容（多个组件意味着用户是管理员，因此他将被发送到listView等）

我如何存储授权令牌:( react-native-router-flux用于导航）

    AsyncStorage.setItem('access_token',token).then((value)=> { Actions.pageTwo()}).done() 
//navigates to second page

在第二页有

var HotelAdminService = require('./services.js');
....
constructor(props) {
  super(props);
  this.state={
   keyLoaded:false,
  };
  this.tester= HotelAdminService.tester.bind(this); 
}

componentDidMount() {
  HotelAdminService.tester.bind(this);
 }

render() {
    console.log(this.state);
    if (!(this.state.keyLoaded) ) {
      return this.renderLoadingView();
    }
    return (
      <View style={styles.viewContainer} >
        <SearchBar onChangeText={(e) => this.clickMovie(e)}>  </SearchBar>
        <ListView dataSource={this.state.dataSource} renderRow=    {this.renderMovie} style={styles.listView}/>
      </View>
   );
 }

services.js：

exports.tester=function(){
let REQUEST_URL= config.baseUrl + 'api/HotelAdmin/GetKey';


 AsyncStorage.getItem('access_token').then((value) => {

fetch(REQUEST_URL, {
method: 'GET',
headers: {
  'Authorization': 'Bearer ' + value,
 }
 }).then((response) => {return response.json()}  ).then((responseData) => {

 this.setState(
   {key: responseData,
    keyLoaded: true,
    dataSource: this.state.dataSource.cloneWithRows(responseData),
  });
  }).done();



});



}

现在我知道这种方法可行，因为它可以按我的意愿行事，但只有在我从第二页按钮点击时调用它时。我想要做的是让HotelAdmin.tester在开始时工作，这样当我得到数据时它可以导致重新渲染。你可以看到我的渲染方法给出一个加载屏幕，直到keyLoaded变为真。也许一种替代方法是返回字符串而不是更改状态的tester方法，但是我无法从嵌套的promise调用中返回字符串数组。

在当前情况下，由于HotelSystemAdmin.tester无法运行并更改状态，代码仍然停留在加载屏幕中

Answer 1

您只是将函数绑定到componentDidMount中的上下文。您需要调用它：

HotelAdminService.tester.bind(this)();

Asyncronous setState不在componentDidMount中工作，但在其他地方工作：React Native

1 个答案: