时间戳

首页 > 解决方案 > 在 React 中与 JS Promises 作斗争

javascript - 在 React 中与 JS Promises 作斗争

问题描述

我正在为PromiseJavaScript 中的概念而苦苦挣扎。我正在编写一个 React 应用程序，它GET调用 Java 中的一个单独的 API 服务，我想将它的状态存储在一个useState()钩子中。所以这是我的fetch代码：

const ratingsUrl = "%URL%";
const base64 = require("base-64");
const login = "login";
const password = "password";

function fetchRatings() {
  return fetch(ratingsUrl, {
    method: "GET",
    headers: new Headers({
      Authorization: "Basic " + base64.encode(login + ":" + password),
    }),
  })
    .then((response) => response.json())
    .catch(handleError);
}

现在我试图将它的状态存储在我的页面组件中的一个钩子中：

function DisplayPage(){
  const [ratings, setRatings] = useState(fetchRatings());

.
.
.
}

现在，数据返回但它在 a 中Promise，因此导致错误：

Promise {<pending>}
__proto__: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Array(20)

我需要做的是在钩子中初始化数据并将其返回，Table以便我可以映射它。但是，每当我尝试做类似的事情时

ratings.map()

我在控制台中得到一个 TypeError 说ratings.Map is not a function。

我知道该fetch库异步返回数据，但我真正想要的只是将PromiseResult其存储在一个useState()钩子中，这样我就可以进一步对其执行操作。

标签： javascriptreactjsasynchronouspromisefetch-api

解决方案

async方法返回承诺。如果你直接在你的setRatings状态变量中设置一个promise的结果，你会得到一个promise。

通常，这将被重写为：

function DisplayPage(){
  const [ratings, setRatings] = useState(null);

  useEffect(() => {

    fetchRatings
      .then(result => setRatings(result))
      .catch(err => console.error(err));

  }, []);
 
  if (ratings === null) return <div>loading...</div>;
  
  /* .. do your thing .. */

}

推荐阅读