Javascript getProfile（）正在返回一个未定义的对象

我是开发Liff应用程序的新手，这就是我遇到的：当我执行Liff.getProfile（）时，它返回未定义的，这意味着我无法获取用户的任何信息。 我做错了什么或没有做什么

我在网上搜索过，但似乎很少有人使用React开发Liff应用程序

下面是我的App.js

// import liff from '@line/liff';
// import init from '@line/liff/dist/lib/init';
import React, { Component, useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import './App.css';

const liff = window.liff
const myliffId = 'xxxxxxxxxxxxxx'
class App extends Component {
  constructor(){
    super()
    console.log(5)
    this.state= {
      text : '0'
    }
  }
  // https://f4c2d15b579f.ngrok.io

    // start = async () => {
    //   liff.ready.then(()=>{
    //     console.log(liff.getOS())
    //     return <div>hello</div>
    //   })
    //   await liff.init({liffId: myliffId})
    // }
  
  componentWillMount = () => {
    liff
      .init({
        liffId: "xxxxxxxxxxxxxx", // Use own liffId
      })
      .then(() => {
        if (!liff.isLoggedIn()) liff.login({ redirectUri: 'https://11d493b7e4c8.ngrok.io' });
      })
      .catch((err) => {
        console.log(err.code, err.message);
      }).then(()=>{
        liff.getProfile()
      }).catch((err) => {
        console.log('wrong connection')
      })
      .then((profile)=>{
        console.log(profile)
        this.setState({
          text: profile.userId,
        })
      })
  };

  print = () => {
    console.log(55555)
  }
  // componentDidMount = () => {
  //   return <div>hllllll</div>
  // }
render(){
  console.log(liff.getLanguage())

    return (
      
      <div >
        hi
        <button>ho</button>
        <div class="buttonGroup">
              <div class="buttonRow">
                  <button id="openWindowButton" onClick={this.print}>{this.state.text}</button>
                  <button id="closeWindowButton" onClick={this.print}>Close LIFF App</button>
              </div>
        </div>
      </div>
    );
  }
  }
export default App;

//从'@line/liff'导入liff'；
//从“@line/liff/dist/lib/init”导入init；
从“React”导入React，{Component，useffect，useState}；
从“react dom”导入react dom；
导入“/App.css”；
常量liff=window.liff
常量myliffId='xxxxxxxxxxxxx'
类应用程序扩展组件{
构造函数（）{
超级（）
控制台日志（5）
此。状态={
文本：“0”
}
}
// https://f4c2d15b579f.ngrok.io
//开始=异步（）=>{
//生活准备好了。然后（（）=>{
//console.log（liff.getOS（））
//打招呼
//   })
//等待liff.init（{liffId:myliffId}）
// }
组件将装入=（）=>{
liff
.init({
liffId:“XXXXXXXXXXXXX”//使用自己的liffId
})
.然后（（）=>{
如果（！liff.isLoggedIn（））liff.login（{redirectUri:'https://11d493b7e4c8.ngrok.io' });
})
.catch（（错误）=>{
日志（err.code，err.message）；
}).然后（（）=>{
liff.getProfile（）
}).catch（（错误）=>{
console.log（'连接错误'）
})
。然后（（配置文件）=>{
console.log（配置文件）
这是我的国家({
text:profile.userId，
})
})
};
打印=（）=>{
控制台日志（55555）
}
//componentDidMount=（）=>{
//返回高电平
// }
render（）{
console.log（liff.getLanguage（））
返回(
你好
呵
{this.state.text}
关闭LIFF应用程序
);
}
}
导出默认应用程序；

在这方面我真的需要一些帮助，每个人似乎都在发展LIff。提前谢谢

liff.init({ liffId: 'xxxxxxxx-xxxxxxx' })
  .then(async () => {
    if (liff.isLoggedIn()) {
      console.log(liff.getProfile());
    } else {
      liff.login();
    }
  })
  .catch((err) => {
    console.log(err);
  })