如何解决如何将会话中的电子邮件添加到reactjs中的表单中
我正在尝试让用户的电子邮件登录到我的react应用程序中,但是遇到了一些麻烦。
以上是我的会议来自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"
现在,我希望我的电子邮件来自该会话,其余信息来自userdata。
我将如何实现?
解决方法
您需要将两个调用拆分为单独的函数,然后将它们添加为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();
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。