Question

我试图在视图中运行一个类，但是我收到以下错误：

null不是对象（评估＆＃39; this.state.token＆＃39;）

这是我试图渲染的类：

class BackEnd extends Component{
render() {
  if (this.state.token) {
    return (
    <ListView dataSource={this.state.users}
            renderRow={this.renderUsers}
            style={styles.listView} />
  );
  } else {
  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>
        Mobil
      </Text>
      <TextInput
        style={styles.textInput}
        onChangeText={(username) => this.setState({'username': username})}
        value= {this.state.username}
      />
      <TextInput
        secureTextEntry={true}
        style={styles.textInput}
        onChangeText={(password) => this.setState({'password': password})}
        value={this.state.password}
      />
      <TouchableHighlight style={styles.button} onPress={ () => this.getToken(config.client_id, config.client_key, this.state.username, this.state.password)}>
        <Text>Login</Text>
      </TouchableHighlight>
      <Text style={styles.error}>
        {this.state.error}
      </Text>
    </View>
  )};
}
}

我在我的组件中获得了以下代码：

export default class AwesomeProject extends Component {

constructor(props, context) {
super(props, context)
this.tabarRef = null
this.state = {
  tab: 'item1',
  text: '',
  selected2: 'key1',
  color: 'red',
  mode: Picker.MODE_DIALOG,
  token: '',
  username: '',
  password: '',
  error: '',
  users: new ListView.DataSource(
    { rowHasChanged: (row1, row2) => row1 !== row2, }
  ),
};
// this.getToken() = this.getToken().bind(this)
}  


componentDidMount() {
  this.loadInitialState().done();
}

async loadInitialState() {
try {
let token = await AsyncStorage.getItem('token');
if (token !== null) {
 this.setState({ token: token });
 this.getData(this.state.token);
} else {
 this.setState({ 'error': 'LogIn' })
}

} catch (error) {

  }
}

async getToken (client_id, client_key, username, password) {

  var data = new FormData();
  data.append('grant_type', 'password');
  data.append('client_id', client_id);
  data.append('client_secret', client_key);
  data.append('username', username);
  data.append('password', password);

    let response = await fetch('https://localhost:8000/o/applications/1/', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Origin': '',
          'Host': 'your-domain.com',
   },
        body: data
      });
      let responseJson = await response.json();
      if (responseJson.hasOwnProperty('error')) {
        this.setState({'error': responseJson.error});
      } else {
      AsyncStorage.setItem('token', responseJson.access_token);
      this.setState({'token': responseJson.access_token});
      this.getData(this.state.token);
    }
  }

async getData(token) {

  let response = await fetch('https://localhost:8000/o/applications/1/',
                          {
                            method: 'GET',
                            headers: {
                              'Accept': 'application/json',
                              'Authorization': 'Bearer '+token,
                              'Host': 'your-domain.com',
                            },
                          }
                        );
  let responseJson = await response.json();
  if (responseJson.hasOwnProperty('detail')) {
    this.setState({'error': responseJson.detail});
  } else {
    this.setState({'user': this.state.users.cloneWithRows(responseJson)});
  }

}

我在渲染函数中调用BackEnd类：

  case 'item2':
    content = 
        <View>
         <BackEnd/>
         <Text style={styles.instructions}> Hier komt het 
(school)rooster</Text>
        </View>
    break

堆栈跟踪：

null不是一个对象（评估＆＃39; this.state.token＆＃39;）给予 C：\ Users \用户曼苏尔\文件\ AwesomeProject \ SRC \ Smartplanner.js：64：21 C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：1045：14 measureLifeCyclePerf C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：85：11 _renderValidatedComponentWithoutOwnerOrContext C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：1045：8 _renderValidatedComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：1075：10 performInitialMount C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：484：24 mountComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：346：40 mountComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactReconciler.js：62：6 updateChildren C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactChildReconciler.js：157：10 _reconcilerUpdateChildren C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactMultiChild.js：212：10 _updateChildren C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactMultiChild.js：345：6 updateChildren C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactMultiChild.js：331：25 receiveComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染\天然\ ReactNativeBaseComponent.js：130：24 receiveComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactReconciler.js：163：38 _updateRenderedComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：982：8 _performComponentUpdate C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：944：34 updateComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：847：8 receiveComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：710：6 receiveComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactReconciler.js：163：38 updateChildren C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactChildReconciler.js：143：10 _reconcilerUpdateChildren C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactMultiChild.js：212：10 _updateChildren C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactMultiChild.js：345：6 updateChildren C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactMultiChild.js：331：25 receiveComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染\天然\ ReactNativeBaseComponent.js：130：24 receiveComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactReconciler.js：163：38 _updateRenderedComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：982：8 _performComponentUpdate C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：944：34 updateComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：847：8 receiveComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：710：6 receiveComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactReconciler.js：163：38 updateChildren C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactChildReconciler.js：143：10 _reconcilerUpdateChildren C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactMultiChild.js：212：10 _updateChildren C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactMultiChild.js：345：6 updateChildren C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactMultiChild.js：331：25 receiveComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染\天然\ ReactNativeBaseComponent.js：130：24 receiveComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactReconciler.js：163：38 _updateRenderedComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：982：8 _performComponentUpdate C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：944：34 updateComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：847：8 receiveComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：710：6 receiveComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactReconciler.js：163：38 _updateRenderedComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：982：8 _performComponentUpdate C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：944：34 updateComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：847：8 receiveComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：710：6 receiveComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactReconciler.js：163：38 _updateRenderedComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：982：8 _performComponentUpdate C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：944：34 updateComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：847：8 receiveComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：710：6 receiveComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactReconciler.js：163：38 _updateRenderedComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：982：8 _performComponentUpdate C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：944：34 updateComponent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：847：8 performUpdateIfNecessary C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactCompositeComponent.js：735：8 performUpdateIfNecessary C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactReconciler.js：213：46 runBatchedUpdates C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactUpdates.js：171：6 演出 C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\ utils的\ Transaction.js：149：24 演出 C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\ utils的\ Transaction.js：149：24 演出 C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactUpdates.js：96：8 flushBatchedUpdates C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactUpdates.js：199：26 关闭所有 C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\ utils的\ Transaction.js：222：29 演出 C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\ utils的\ Transaction.js：163：24 batchedUpdates C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactDefaultBatchingStrategy.js：65：33 batchedUpdates C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染器\共享\堆\调解器\ ReactUpdates.js：111：41 _receiveRootNodeIDEvent C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染\天然\ ReactNativeEventEmitter.js：126：32 receiveTouches C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\渲染\ SRC \渲染\天然\ ReactNativeEventEmitter.js：213：8 __callFunction C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\ BatchedBridge \ MessageQueue.js：242：47 C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\ BatchedBridge \ MessageQueue.js：108：26 守护 C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\ BatchedBridge \ MessageQueue.js：46：4 callFunctionReturnFlushedQueue C：\ Users \用户曼苏尔\文件\ AwesomeProject \ node_modules \反应天然\库\ BatchedBridge \ MessageQueue.js：107：10

我该如何解决这个问题？

Answer 1

将组件级别的状态移动到构造函数中的状态。

null不是对象（评估＆＃39; this.state.token＆＃39;）React-Native

1 个答案: