reactjs从cognito获取参数

分类：编程问答

如何解决reactjs从cognito获取参数

我正在尝试获取当前登录用户的电子邮件，并在我的fetch（）调用中使用它。我目前可以从getfirstapi（）获取电子邮件，并以其形式使用它，但是我无法将其传递到fetch（）在哪里的getSecondApi（）中？

IV尝试创建getEmail函数以将其返回，但是没有运气。

代码 

      import * as React from "react";
        import axios from "axios";
        import { Form,Card,Grid } from "tabler-react";
        import { Button,Modal } from "semantic-ui-react";
    import Auth from '@aws-amplify/auth';

import '../../index.css';
import { arrayOf } from "prop-types";

//const config = require('../config.json');

class GeneralInformation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // States from API
      firstname: "",middlename: "",surname: "",city: "",postcode: "",state: "",email: "",about: "",// States for editable form
      formfirstname: "",formmiddlename: "",formsurname: "",formcity: "",formpostcode: "",formstate: "",formabout: "",// Modal State
      open: false,};
  }

 getUseremail() {
  return Auth.currentAuthenticatedUser().then(user => user.attributes.email)
 }  

 email = Auth.currentAuthenticatedUser().then(user => user.attributes.email)

 getFirstApi() {
   return Auth.currentAuthenticatedUser().then((user) => {
      this.setState({email: user.attributes.email,formemail: user.attributes.email})
    });
 }

  getSecondApi(email) {
    fetch(`https://ezha2ns0bl.execute-api.ap-southeast-2.amazonaws.com/prod/userdata?foo=${encodeURIComponent(email)}`)
      .then(res => res.json())
      .then(
        console.log("THIS IS RESULT2 " + email),(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,});
          console.log("THIS IS RESULT1 " + result)},)
  }

  componentDidMount() {

    this.getFirstApi();
    this.getSecondApi();

  }

  handleChange = (input) => (event) => {
    this.setState({ [input]: event.target.value });
  };

  handleSubmit = async (event) => {
    event.preventDefault();

    this.setState((prevState) => ({
      // If submitting new values,update the state to represent the new data
      firstname: prevState.formfirstname,middlename: prevState.formmiddlename,surname: prevState.formsurname,city: prevState.formcity,postcode: prevState.formpostcode,email: prevState.formemail,userState: prevState.formstate,about: prevState.formabout,open: false,}))
    try {
      const params = {
        "userFirstName": this.state.formfirstname,"userMiddleName": this.state.formmiddlename,"userLastName": this.state.formsurname,"userCity": this.state.formcity,"userPostCode": this.state.formpostcode,"userEmail": this.state.formemail,"userState": this.state.formstate,"userAbout": this.state.formabout,"userType": "jobseeker"
      };
      await axios.post('https://qrg3idkox4.execute-api.ap-southeast-2.amazonaws.com/prod/{userEmail}/',params);
    }catch (err) {
      console.log(`An error has occurred: ${err}`);
  }
 };

  cancelForm = () => {
    // If cancelling,reset any fields that have been changed to the original values so that when the modal is re-opened,the old values are shown
    this.setState((prevState) => ({
      formfirstname: prevState.firstname,formmiddlename: prevState.middlename,formsurname: prevState.surname,formcity: prevState.city,formpostcode: prevState.postcode,formstate: prevState.state,formabout: prevState.about,}));
  };

  openModal = () => {
    this.setState({ open: true });
  };

  render() {
    const {
      firstname,middlename,surname,city,postcode,state,email,about,formfirstname,formmiddlename,formsurname,formcity,formpostcode,formstate,formabout,open,} = this.state;

    return (
      <div className="card" name="generalInfo">
        <Card.Body>
          <Grid>
            <Grid.Row>
              <Grid.Col md={7}>
                <Card.Title>General Information</Card.Title>
              </Grid.Col>
              <Grid.Col md={5}>
                {/* MODAL BUTTON */}
                <Button
                  floated="right"
                  basic
                  icon="pencil"
                  type="button"
                  compact
                  onClick={this.openModal}
                />
              </Grid.Col>
            </Grid.Row>

            <Grid.Row>
              {/* ROW 1 */}
              <Grid.Col md={4}>
                <Form.Group label="First Name">
                  <Form.Input name="firstname" readOnly value={firstname} />
                </Form.Group>
              </Grid.Col>
              <Grid.Col md={4}>
                <Form.Group label="Middle Name">
                  <Form.Input name="middlename" readOnly value={middlename} />
                </Form.Group>
              </Grid.Col>
              <Grid.Col md={4}>
                <Form.Group label="Surname">
                  <Form.Input name="surname" readOnly value={surname} />
                </Form.Group>
              </Grid.Col>

              {/* ROW 2 */}
              <Grid.Col md={3}>
                <Form.Group label="City">
                  <Form.Input name="city" readOnly value={city} />
                </Form.Group>
              </Grid.Col>
              <Grid.Col md={2}>
                <Form.Group label="Post Code">
                  <Form.Input name="postcode" readOnly value={postcode} />
                </Form.Group>
              </Grid.Col>
              <Grid.Col md={3}>
                <Form.Group label="State">
                  <Form.Input name="state" readOnly value={state} />
                </Form.Group>
              </Grid.Col>
              <Grid.Col md={4}>
                <Form.Group label="Email">
                  <Form.Input name="email" readOnly value={email} />
                </Form.Group>
              </Grid.Col>

              {/* ROW 3 */}
              <Grid.Col md={12}>
                <Form.Group className="mb=0" label="About Me">
                  <Form.Textarea
                    name="aboutme"
                    rows={3}
                    disabled
                    readOnly
                    value={about}
                  />
                </Form.Group>
              </Grid.Col>
            </Grid.Row>
          </Grid>
        </Card.Body>

        {/* MODAL CONTENT */}
        <Modal
          style={{ position: "relative" }}
          closeOnDimmerClick={false}
          open={open}
        >
          <Modal.Header>Edit Info</Modal.Header>
          <Modal.Content>
            <Form onSubmit={this.handleSubmit}>
              <Grid.Row>
                <Grid.Col md={4}>
                  <Form.Group label="First Name">
                    <Form.Input
                      name="firstname"
                      value={formfirstname}
                      onChange={this.handleChange("formfirstname")}
                    />
                  </Form.Group>
                </Grid.Col>
                <Grid.Col md={4}>
                  <Form.Group label="Middle Name">
                    <Form.Input
                      name="middlename"
                      value={formmiddlename}
                      onChange={this.handleChange("formmiddlename")}
                    />
                  </Form.Group>
                </Grid.Col>
                <Grid.Col md={4}>
                  <Form.Group label="Surname">
                    <Form.Input
                      name="surname"
                      value={formsurname}
                      onChange={this.handleChange("formsurname")}
                    />
                  </Form.Group>
                </Grid.Col>
              </Grid.Row>

              {/* ROW 2 */}
              <Grid.Row>
                <Grid.Col md={3}>
                  <Form.Group label="City">
                    <Form.Input
                      name="city"
                      value={formcity}
                      onChange={this.handleChange("formcity")}
                    />
                  </Form.Group>
                </Grid.Col>
                <Grid.Col md={2}>
                  <Form.Group label="Post Code">
                    <Form.Input
                      name="postcode"
                      value={formpostcode}
                      onChange={this.handleChange("formpostcode")}
                    />
                  </Form.Group>
                </Grid.Col>
                <Grid.Col md={3}>
                  <Form.Group label="State">
                    <Form.Input
                      name="state"
                      value={formstate}
                      onChange={this.handleChange("formstate")}
                    />
                  </Form.Group>
                </Grid.Col>
              </Grid.Row>

              {/* ROW 3 */}
              <Grid.Row>
                <Grid.Col md={12}>
                  <Form.Group className="mb=0" label="About Me">
                    <Form.Textarea
                      name="aboutme"
                      rows={3}
                      value={formabout}
                      onChange={this.handleChange("formabout")}
                    />
                  </Form.Group>
                </Grid.Col>
              </Grid.Row>

              {/* ROW 4 - SUBMIT */}
              <Grid.Row>
                <Grid.Col md={12}>
                  <Button
                    floated="left"
                    basic
                    type="button"
                    color="red"
                    onClick={this.cancelForm}
                  >
                    {" "}
                    Cancel{" "}
                  </Button>
                  <Button floated="right" basic type="submit" color="green">
                    {" "}
                    Accept Changes{" "}
                  </Button>
                </Grid.Col>
              </Grid.Row>
            </Form>
          </Modal.Content>
        </Modal>
      </div>
    );
  }
}

export default GeneralInformation;

表格

enter image description here

编辑 

>   getEmailApi() {    return
> Auth.currentAuthenticatedUser().then((user) => {
>       const { attributes = {} } = user;
>       console.log(attributes['email']);
>     })}

iv创建了此功能来获取电子邮件

但不知道如何将其传递到getSecondApi

解决方法

我的解决方案 

getEmailApi() {
       return Auth.currentAuthenticatedUser().then((user) => {
          const { attributes = {} } = user;
          console.log(attributes['email']);
          let email =  attributes['email']
          return email
        })}
    
     getFirstApi() {
       return Auth.currentAuthenticatedUser().then((user) => {
          this.setState({email: user.attributes.email,formemail: user.attributes.email})
        });
     }
    
      getSecondApi(email) {
        fetch(`https://ezha2ns0bl.execute-api.ap-southeast-2.amazonaws.com/prod/userdata?userEmail=${encodeURIComponent(email)}`)
          .then(res => res.json())
          .then(
            console.log("THIS IS RESULT2 " + email),(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,});
              console.log("THIS IS RESULT1 " + result)},)
      }
    
      BeforDidMount() { 
       this.getEmailApi().then(email => this.getSecondApi(email)); }
    
      componentDidMount() {
        this.BeforDidMount();
        this.getFirstApi();  
      }

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错：更换其他版本 无法下载依赖可参考：https://blog.csdn.net/weixin_42628809/a
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
微服务启动错误：Command line is too long. Shorten command line for
解决方案1 1、改项目中.idea/workspace.xml配置文件，增加dynamic.classpath参数 2、搜索PropertiesComponent，添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
vue常见错误
删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js): 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加 module.exports = { lin
spark常见错误
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot