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

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

提交表单时，我对AWS Auth进行异步函数调用（类外部），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;

---

不要将变量保留在组件之外。最可能的情况是，您希望将此

用户

和

当前会话

保持在您的状态。由于

signIn

函数是

async

函数，因此它返回一个承诺。使用它并根据返回值更新状态

我在模仿这里的API，不要介意代码。只需检查

signIn

功能以及返回值的方式。您可以根据需要更改逻辑。另外，请参见

handleSubmit

函数以了解如何更新状态

由于代码段不支持

async/await

（我猜），这里有一个例子

函数userApi（）{
返回新承诺（（resolve）=>setTimeout（（）=>resolve（“foo”），500））；
}
函数sessionApi（）{
返回新承诺（（resolve）=>setTimeout（（）=>resolve（“会话”），500）；
}
异步函数登录（用户名、密码）{
试一试{
const user=await userApi（）；
const currentSession=wait sessionApi（）；
返回{user，currentSession}；
}捕获（错误）{
日志（“登录错误”，错误）；
返回误差；
}
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户名：“”，
密码：“”，
用户：null，
当前会话：空
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
const target=event.target；
常量值=target.value；
const name=target.name；
这是我的国家({
[名称]：值
});
}
异步handleSubmit（事件）{
event.preventDefault（）；
const{user，currentSession}=等待登录(
this.state.username，
此为.state.password
);
this.setState（{user，currentSession}）；
}
render（）{
const{user，currentSession}=this.state；
返回(
姓名：
字符串：
{currentSession&&user&&(
{user}-{currentSession}
)}
);
}
}

为什么登录功能不在课堂上？

  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 });
    }
  }

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>
    );
  }
}