React JS中TypeError: this.getToken is not a function问题求助

你遇到的问题核心很清晰：当前着陆页组件里并没有定义getToken方法，这个函数是写在另一个认证服务组件中的，直接用this.getToken()自然找不到对应的函数，所以抛出了类型错误。

下面给你两种简单可行的解决方案：

方案1：把getToken抽成独立的工具函数 #

这是最推荐的做法，因为获取token是多个组件可能都会用到的逻辑，抽成公共工具函数可以避免重复代码，也方便后续维护。

比如创建一个authUtils.js文件，把获取token的逻辑放在里面：

// authUtils.js
export const getToken = () => {
  return localStorage.getItem('id_token');
};

然后在你的着陆页组件里导入这个函数：

import { getToken } from './authUtils'; // 注意路径要根据你的实际文件结构调整

之后在fetch请求里直接调用这个函数即可：

componentDidMount() { 
  fetch('http://theClientAPI:1111/api/clients', { 
    method: 'GET', 
    headers: { 
      'Content-type': 'application/json', 
      'Authorization': `Bearer ${getToken()}` 
    }, 
  }) 
  .then(results => results.json()) 
  .then(data => this.setState({ data: data })) 
}

方案2：在当前着陆页组件内定义getToken方法 #

如果暂时不想抽离公共函数，也可以直接在当前组件的class中添加这个方法，这样this.getToken()就能正确指向组件实例的方法了：

class YourLandingPageComponent extends React.Component {
  // 添加这个方法到组件类中
  getToken() {
    return localStorage.getItem('id_token');
  }

  componentDidMount() { 
    // 这里的this.getToken()就可以正常调用了
    fetch('http://theClientAPI:1111/api/clients', { 
      method: 'GET', 
      headers: { 
        'Content-type': 'application/json', 
        'Authorization': `Bearer ${this.getToken()}` 
      }, 
    }) 
    .then(results => results.json()) 
    .then(data => this.setState({ data: data })) 
  }

  // render方法及其他逻辑...
}

额外优化建议 #

调用API之前最好先检查token是否存在，避免出现Bearer 后面是空字符串的无效请求，比如可以加个简单的判断：

componentDidMount() { 
  const token = getToken(); // 或者this.getToken()，根据你选用的方案调整
  if (!token) {
    // 比如跳回登录页，需要确保组件有路由跳转能力
    this.props.history.push('/login');
    return;
  }
  fetch('http://theClientAPI:1111/api/clients', { 
    method: 'GET', 
    headers: { 
      'Content-type': 'application/json', 
      'Authorization': `Bearer ${token}` 
    }, 
  }) 
  .then(results => results.json()) 
  .then(data => this.setState({ data: data }))
  .catch(err => console.error('获取客户端列表失败:', err))
}

内容的提问来源于stack exchange，提问作者user1724708