Блог

Я пытаюсь создать компонент, который извлекает полный список пользователей из Amazon AWS / Amplify и отображает указанные результаты в таблице с помощью функции map. Пока все хорошо.

Однако для 4-го столбца мне нужно вызвать вторую функцию, чтобы проверить, является ли пользователь частью каких-либо групп. Я протестировал функцию как событие кнопки / onClick — и она работает (консоль.протоколирование выходных данных). Но вызов его напрямую при рендеринге данных таблицы ничего не возвращает.

Вот что я включил в свой оператор return (в функции map)

<td>={getUserGroups(user.email)}</td>

Который затем вызывает эту функцию:

 const getUserGroups = async (user) => {
    const userGroup = await cognitoIdentityServiceProvider.adminListGroupsForUser(
      {
        UserPoolId: '**Removed**',
        Username: user,
      },
      (err, data) => {
        if (!data.Groups.length) {
          return 'No';
        } else {
          return 'Yes';
        }
      }
    );
  };
 

Кто-нибудь может посоветовать? Заранее большое спасибо, если это так!

Потому что вы никогда не должны этого делать! Ознакомьтесь с этим документом React, чтобы лучше понять, как и где вы должны выполнять вызовы AJAX.

Существует несколько способов, как вы можете решить свою проблему. Например, добавьте группы пользователей (или все, что вам нужно получить от серверной части) в качестве состояния, а затем вызовите серверную часть и затем обновите это состояние с помощью ответа, а затем React соответствующим образом перерисовает ваш компонент.

Пример с крючками, но это просто для объяснения идеи:

 const [groups, setGroups] = useState(null); // here you will keep what "await cognitoIdentityServiceProvider.adminListGroupsForUser()" returns

useEffect(() => {}, [
    // here you will call the backend and when you have the response
    // you set it as a state for this component
    setGroups(/* data from response */);
]);
 

И ваш компонент (столбец, что угодно) должен использовать groups :

 <td>{/* here you will do whatever you need to do with groups */}</td>
 

Для компонентов класса вы будете использовать методы жизненного цикла для достижения этой цели (все это в документации — ссылка выше).