React-基于类外的变量更新类中的值

Question

我有一个React类，它呈现一个登录表单，包括用户名、密码和提交按钮。

当表单提交时，我对AWS Auth进行了一个异步函数调用(类外部(，它成功地返回并将响应写入控制台。

我想在类中使用异步响应——我该怎么做？正如我所说的，它是在控制台上写的，我只需要在课堂上使用它。

我尝试过直接读取currentsession变量，但是它不会更新。

import React from 'react';
import Amplify, { Auth } from 'aws-amplify';
Amplify.configure({ // config here})
let user;
let currentsession;
export async function signIn(username, password) {
try {
user = await Auth.signIn(username, password);
console.log(user);
currentsession = await Auth.currentSession();
console.log(currentsession);
} catch (error) {
console.log('error signing in', error);
}
}
class SignIn extends React.Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({
[name]: value
});
}

handleSubmit(event) {
signIn(this.state.username, this.state.password);
event.preventDefault();
}
render() {
return (
<React.Fragment>
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" name="username" value={this.state.username} onChange={this.handleChange} />
</label>
<label>
String:
<input type="text" name="password" value={this.state.password} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
<div>{ currentsession }</div>
</React.Fragment>
);
}
}
export default SignIn;

更新

我接受的答复非常有效，回答了这个问题。它也启发了我在这里包含的另一个答案，删除了外部函数。

我意识到我可以使handleSubmit函数异步，并在那里处理它。代码为：

async handleSubmit(event) {
event.preventDefault();
try {
let user = await Auth.signIn(this.state.username, this.state.password);
this.setState( { response: 'Login Success!' });
} catch(err) {
this.setState( { response: err.message });
}
}

Answer 1

不要将变量保留在组件之外。很可能，您希望将此user和currentSession保持在您的状态。由于signIn函数是async，因此它返回一个promise。使用它并根据您的返回值更新您的状态。

我在这里模仿API，不要介意代码。只需检查signIn函数以及我如何返回值。你可以根据自己的需要改变逻辑。另外，请参阅handleSubmit函数，了解如何更新状态。

由于代码片段不支持async/await(我想(，这里是一个工作沙盒。

function userApi() {
return new Promise((resolve) => setTimeout(() => resolve("foo"), 500));
}
function sessionApi() {
return new Promise((resolve) => setTimeout(() => resolve("session"), 500));
}
async function signIn(username, password) {
try {
const user = await userApi();
const currentSession = await sessionApi();
return { user, currentSession };
} catch (error) {
console.log("error signing in", error);
return error;
}
}

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
username: "",
password: "",
user: null,
currentSession: null
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({
[name]: value
});
}
async handleSubmit(event) {
event.preventDefault();
const { user, currentSession } = await signIn(
this.state.username,
this.state.password
);
this.setState({ user, currentSession });
}
render() {
const { user, currentSession } = this.state;
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input
type="text"
name="username"
value={this.state.username}
onChange={this.handleChange}
/>
</label>
<label>
String:
<input
type="text"
name="password"
value={this.state.password}
onChange={this.handleChange}
/>
</label>
<input type="submit" value="Submit" />
</form>
<div>
{currentSession && user && (
<span>
{user}-{currentSession}
</span>
)}
</div>
</div>
);
}
}