如何从 React 中已履行的 Promise 中获取价值

Question

我有一个 API 可以在 React 项目中返回我的预期结果。

我写了这个函数来调用API并获取结果：

async function getUsers() {
  const token = store.getState().token;
  const data = { token };
  await MyApi.getUsers(data)
    .then((result) => {
      console.log(result);
      return result;
    })
    .catch((error) => {
      console.log(error);
      return null;
    });
}

const userList = getUsers();

当我在函数部分result中console.log 时，它打印了预期的用户列表（即 json 数组）。then但是当我 console.log 时，userList它promise如下图所示：

这意味着函数的返回值getUsers是 a Promise。

1- 我怎样才能得到这个承诺的结果？

2-为什么PromiseResultisundefined而resultinthen部分是 json 数组？

** 这些代码不在react组件中

预期result是：

[
 {
  id: 1,
  name: "user1",
  role: "student"
 },
{
  id: 2,
  name: "user2",
  role: "student"
 },
{
  id: 3,
  name: "user3",
  role: "student"
 },
]

我想使用userList数组来创建user card：

<div>
{userList ? (
 userList.map((user) =>
 {
  <Card>
    <h1> user.name </h1>
  </Card>
 }
):
(<h1>user list is empty </h1>)
}

Answer 1

问题

为什么 PromiseResult 未定义，而 then 部分的结果是 json 数组？

getUsers是一个async函数，因此它隐式返回 aPromise但您不返回任何解析值，它只是等待MyApi.getUsers承诺解析并且不返回任何内容，即 void 返回或未定义。

换句话说，从逻辑上讲，它看起来类似于以下内容：

async function getUsers() {
  const token = store.getState().token;
  const data = { token };
  await MyApi.getUsers(data)
    .then((result) => {
      console.log(result);
      return result;
    })
    .catch((error) => {
      console.log(error);
      return null;
    });
  return undefined;
}

解决方案

回报MyApi.getUsers承诺。

async function getUsers() {
  const token = store.getState().token;
  const data = { token };
  return MyApi.getUsers(data)
    .then((result) => {
      console.log(result);
      return result;
    })
    .catch((error) => {
      console.log(error);
      return null;
    });
}

现在，在您的反应代码中，您可能会有一些useEffect钩子调用此函数来设置某些加载状态。

const [userList, setUserList] = useState([]);

useEffect(() => {
  getusers()
    .then(userList => setUserList(userList))
    .catch(error => {
      // handle any error state, rejected promises, etc..
    });
}, []);

或者

const [userList, setUserList] = useState([]);

useEffect(() => {
  const loadUserList = async () => {
    try {
      const userList = await getusers();
      setUserList(userList)
    } catch(error) {
      // handle any error state, rejected promises, etc..
    }
  };

  loadUserList();
}, []);