reactjs - 如何将 session 中的电子邮件添加到 reactjs 中的表单中

Question

我试图从登录我的 React 应用程序的用户那里获取电子邮件，但遇到了一些问题。

上面是我的 session 来自cognito

下面是我的数据被添加到表单中的位置。 fetch() 数据已正确添加，但我需要一种方法来添加来自 cognito 的电子邮件。

  componentDidMount() {
fetch("https://ezha2ns0bl.execute-api.ap-southeast-2.amazonaws.com/prod/userdata")
  .then(res => res.json())
  .then(
    (result) => {
      this.setState({
        firstname: result.Item.userFirstName,
        middlename: result.Item.userMiddleName,
        surname: result.Item.userLastName,
        city: result.Item.userCity,
        postcode: result.Item.userPostCode,
        state: result.Item.userState,
        email: ,
        about: result.Item.userAbout,

        formfirstname: result.Item.userFirstName,
        formmiddlename: result.Item.userMiddleName,
        formsurname: result.Item.userLastName,
        formcity: result.Item.userCity,
        formpostcode: result.postcode,
        formstate: result.Item.userState,
        formabout: result.Item.userAbout,
      });
    },
  )

这是来自fetch()的数据

Item    
userLastName    "Pearson"
userMiddleName  "A"
userEmail   "testapi12@gmail.com"
userType    "jobseeker"
userAbout   "I am Jane and I'm looking for a job"
userFirstName   "Jane"
userState   "VIC"
userPostcode    "3976"
userCity    "Melbourne"

现在我希望我的电子邮件来自 session ，其余信息来自用户数据。

我该如何实现？

Answer 1

您需要将两个调用拆分为单独的函数，然后将它们添加到 componentdidmount() 中。这是状态更新将发生的地方。

  getFirstApi() {
fetch("https://ezha2ns0bl.execute-api.ap-southeast-2.amazonaws.com/prod/userdata")
  .then(res => res.json())
  .then(
    (result) => {
      this.setState({
        firstname: result.Item.userFirstName,
        middlename: result.Item.userMiddleName,
        surname: result.Item.userLastName,
        city: result.Item.userCity,
        postcode: result.Item.userPostcode,
        state: result.Item.userState,
        about: result.Item.userAbout,

        formfirstname: result.Item.userFirstName,
        formmiddlename: result.Item.userMiddleName,
        formsurname: result.Item.userLastName,
        formcity: result.Item.userCity,
        formpostcode: result.postcode,
        formstate: result.Item.userState,
        formabout: result.Item.userAbout,
      });
    },
  )


 }

  getSecondApi() {
    Auth.currentAuthenticatedUser().then((user) => {
      this.setState({email: user.attributes.email, formemail: user.attributes.email})
     // console.log('user email = ' + user.attributes.email):
    });
  }

  componentDidMount() {
    this.getFirstApi();
    this.getSecondApi();

  }