null 不是一个对象（评估'this.state.token'）React-Native答案

【问题标题】：null is not an object (evaluating 'this.state.token') React-Nativenull 不是一个对象（评估'this.state.token'）React-Native
【发布时间】：2017-09-19 09:08:05
【问题描述】：

我正在尝试在视图中运行一个类，但出现以下错误：

null 不是对象（评估 'this.state.token'）

这是我试图渲染的类：

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 不是对象（评估 'this.state.token'）使成为 C:\Users\Mansur\Documents\AwesomeProject\src\Smartplanner.js:64:21 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:1045:14 测量生命周期性能 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:85:11 _renderValidatedComponentWithoutOwnerOrContext C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:1045:8 _renderValidatedComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:1075:10 执行初始安装 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:484:24 挂载组件 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:346:40 挂载组件 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:62:6 更新儿童 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactChildReconciler.js:157:10 _reconcilerUpdateChildren C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactMultiChild.js:212:10 _updateChildren C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactMultiChild.js:345:6 更新儿童 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactMultiChild.js:331:25 接收组件 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\native\ReactNativeBaseComponent.js:130:24 接收组件 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:163:38 _updateRenderedComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:982:8 _performComponentUpdate C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:944:34 更新组件 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:847:8 接收组件 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:710:6 接收组件 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:163:38 更新儿童 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactChildReconciler.js:143:10 _reconcilerUpdateChildren C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactMultiChild.js:212:10 _updateChildren C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactMultiChild.js:345:6 更新儿童 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactMultiChild.js:331:25 接收组件 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\native\ReactNativeBaseComponent.js:130:24 接收组件 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:163:38 _updateRenderedComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:982:8 _performComponentUpdate C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:944:34 更新组件 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:847:8 接收组件 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:710:6 接收组件 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:163:38 更新儿童 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactChildReconciler.js:143:10 _reconcilerUpdateChildren C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactMultiChild.js:212:10 _updateChildren C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactMultiChild.js:345:6 更新儿童 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactMultiChild.js:331:25 接收组件 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\native\ReactNativeBaseComponent.js:130:24 接收组件 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:163:38 _updateRenderedComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:982:8 _performComponentUpdate C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:944:34 更新组件 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:847:8 接收组件 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:710:6 接收组件 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:163:38 _updateRenderedComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:982:8 _performComponentUpdate C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:944:34 更新组件 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:847:8 接收组件 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:710:6 接收组件 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:163:38 _updateRenderedComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:982:8 _performComponentUpdate C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:944:34 更新组件 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:847:8 接收组件 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:710:6 接收组件 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:163:38 _updateRenderedComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:982:8 _performComponentUpdate C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:944:34 更新组件 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:847:8 必要时执行更新 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:735:8 必要时执行更新 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:213:46 运行批处理更新 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactUpdates.js:171:6 履行 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\utils\Transaction.js:149:24 履行 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\utils\Transaction.js:149:24 履行 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactUpdates.js:96:8 刷新批处理更新 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactUpdates.js:199:26 关闭所有 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\utils\Transaction.js:222:29 履行 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\utils\Transaction.js:163:24 批量更新 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactDefaultBatchingStrategy.js:65:33 批量更新 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactUpdates.js:111:41 _receiveRootNodeIDEvent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\native\ReactNativeEventEmitter.js:126:32 接收触摸 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\native\ReactNativeEventEmitter.js:213:8 __callFunction C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:242:47 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:26 警卫 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:46:4 callFunctionReturnFlushedQueue C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:107:10

我该如何解决这个问题？

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

将组件级别的state移动到constructor中的state。

【讨论】：