Назначить переменную из асинхронного метода

Question

Я работаю с AWS-Amplify и хочу получить владельца из Cognito и назначить его для владельца переменной. Когда я делаю console.log(user.username) внутри then(, я вижу правильные данные. Однако, когда я делаю console.log(owner);, я вижу только ноль.

function App() {
  // Get user
  let owner = null;

  Auth.currentAuthenticatedUser({
    bypassCache: false // Optional, By default is false. If set to true, this call will send a request to Cognito to get the latest user data
  })
    .then(user => {
      owner = user.username;
    })
    .catch(err => console.log(err));

  console.log(owner);

Answer 1

Вы не хотите создавать какие-либо побочные эффекты внутри тела компонента, и если вам нужно сохранить какие-то данные, которые со временем меняются state - это место для него.

Для побочного эффекта используйте useEffect, который можно настроить при запуске функции обратного вызова с помощью массива зависимостей, который в этом случае пуст и будет запускать функцию обратного вызова только при монтировании

function App() {
  const [owner, setOwner] = useState(null)

  useEffect(() => {
    Auth.currentAuthenticatedUser({
      bypassCache: false,
    })
      .then((user) => {
        setOwner(user.username)
      })
      .catch(console.log)
  }, [])

  return <div>{owner}</div>
}

Answer 2

function App() {
  // Get user
  let owner = null;

  return Auth.currentAuthenticatedUser({
    bypassCache: false // Optional, By default is false. If set to true, this call will send a request to Cognito to get the latest user data
  })
    .then(user => {
      owner = user.username;
      console.log(owner);
      return owner
    })
    .catch(err => console.log(err));

Поскольку Auth isync console.log (владелец) выполняется до разрешения обещания. Переместите его, чтобы увидеть результат.