Javascript 在React中与JS承诺抗争

我正在努力解决JavaScript中的

Promise

概念。我正在编写一个React应用程序，它对Java中的一个单独的API服务进行

GET

调用，并且我想将其状态存储在

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

.
.
.
}

现在，数据返回，但它在

承诺中

，因此会导致错误：

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

我在控制台中收到一个类型错误，说

ratings.Map不是一个函数

---

我知道

fetch

库异步返回数据，但我真正想要的是

PromiseResult

存储在

useState（）

钩子中，这样我就可以对它执行更深入的操作。

async

方法返回承诺。如果您直接在

setRatings

状态变量中设置承诺的结果，您将得到一个承诺

通常会重写如下内容：

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 .. */

}

函数显示页（）{
常数[额定值，设定额定值]=使用状态（空）；
useffect（（）=>{
吸引人的收视率
.然后（结果=>setRatings（结果））
.catch（err=>console.error（err））；
}, []);
如果（额定值===null）返回加载。。。；
/*做你的事*/
}

async

方法返回承诺。如果您直接在

setRatings

状态变量中设置承诺的结果，您将得到一个承诺

通常会重写如下内容：

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 .. */

}

函数显示页（）{
常数[额定值，设定额定值]=使用状态（空）；
useffect（（）=>{
吸引人的收视率
.然后（结果=>setRatings（结果））
.catch（err=>console.error（err））；
}, []);
如果（额定值===null）返回加载。。。；
/*做你的事*/
}

这个怎么样

const [ratings, setRatings] =  useState();
useEffect(()=>{
         fetch(ratingsUrl, {
method: "GET",
headers: new Headers({
  Authorization: "Basic " + base64.encode(login + ":" + password),
})}).then((response) => {let res = response.json();
    setRatings(res)
      })
.catch(handleError);
 },[])

这个怎么样,

const [ratings, setRatings] =  useState();
useEffect(()=>{
         fetch(ratingsUrl, {
method: "GET",
headers: new Headers({
  Authorization: "Basic " + base64.encode(login + ":" + password),
})}).then((response) => {let res = response.json();
    setRatings(res)
      })
.catch(handleError);
 },[])

---

我建议使用useEffect钩子来设置初始状态（类似于componentDidMount）

因此，如果您期望的响应是一个数组

const [ratings, setRatings] = useState([]);

然后在useffect钩子中，当您从获取请求中获得响应时更新状态。 这样，如果您在请求完成之前映射DOM中的某个位置，就可以防止错误

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

---

我建议使用useEffect钩子来设置初始状态（类似于componentDidMount）

因此，如果您期望的响应是一个数组

const [ratings, setRatings] = useState([]);

然后在useffect钩子中，当您从获取请求中获得响应时更新状态。 这样，如果您在请求完成之前映射DOM中的某个位置，就可以防止错误

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

---

因为fetch是异步运行的，所以您将无法使用调用fetchRatings的即时结果初始化您的状态

幸运的是，有两种相当简单的方法来处理这个问题。您可以使用空值初始化状态，然后在fetchResults解析后进行更新：

函数显示页（）{
//最初评级将是未定义的
const[ratings，setRatings]=useState（）；
//当fetchResults返回时更新状态
fetchResults（）。然后（response=>setRatings（response））；
// ...

上面的示例出于可读性的考虑省略了这一点，但您通常会通过这样做：当您的组件挂载或相关输入（通常是道具，称为效果依赖项）更改时，它会运行：

函数显示页（）{
const[ratings，setRatings]=useState（）；
useffect（（）=>{
fetchResults（）。然后（response=>setRatings（response））；
}，[]）//空的依赖项数组将导致该效果在装载时仅运行一次
// ...

由于fetch是异步运行的，因此您无法使用调用fetchRatings的即时结果初始化您的状态

幸运的是，有两种相当简单的方法可以处理此问题。您可以使用空值初始化状态，然后在fetchResults解析后更新状态：

函数显示页（）{
//最初评级将是未定义的
const[ratings，setRatings]=useState（）；
//当fetchResults返回时更新状态
fetchResults（）。然后（response=>setRatings（response））；
// ...

上面的示例出于可读性的考虑省略了这一点，但您通常会通过这样做：当您的组件挂载或相关输入（通常是道具，称为效果依赖项）更改时，它会运行：

函数显示页（）{
const[ratings，setRatings]=useState（）；
useffect（（）=>{
fetchResults（）。然后（response=>setRatings（response））；
}，[]）//空的依赖项数组将导致该效果在装载时仅运行一次
// ...

fetchRatings

返回承诺…使用您已经知道的承诺方法来获得承诺值（即，您需要使用

。然后

fetchRatings

返回承诺…使用您已经知道的承诺方法来获得承诺值（即，您需要使用

。然后

谢谢，它解决了一些初始错误-但是，当我想返回

表

并通过前面实例化的

ratings

对象映射时，我仍然得到一个

ratings。map

不是一个函数…1.当ratings仍然为

null时返回加载程序是如我在示例中所做的必要操作。2.如果ratings是一个数组，您可能正在查找
.map
函数，而不是
.map
函数。谢谢，它解决了一些初始错误-但是，当我想返回
表
并通过前面实例化的
ratings
对象进行映射时，我仍然获得
评级。Map
不是一个函数…1.在评级仍然为
null
时返回加载器是必要的，就像我在示例中所做的那样。2.如果评级是一个数组，您可能正在查找