Reactjs 具有反应悬念的组件导致永久循环

我正在学习如何反应，并试图运用悬念

首先，我尝试使用包装好的promise对象作为道具。
当问题没有解决时，包装器会抛出承诺。它将永远循环。
然后我尝试使用useEffect，但它也有同样的问题

这是我的代码和沙盒。 请教我如何解决这个问题

*useEffect块注释在沙盒中导出，因为它会永远循环

import React, { Suspense, useEffect, useState } from "react";

const lazyTimer = () => {
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(" from 10sec past");
    }, 1000);
  });
  return promise;
};

const wrapPromise = promise => {
  let status = "pending";
  let result;
  console.log("looping....");

  const suspender = promise.then(
    r => {
      status = "fulfilled";
      result = r;
    },
    e => {
      status = "rejected";
      result = e;
    }
  );
  const read = () => {
    if (status === "pending") {
      throw suspender;
    } else if (status === "rejected") {
      throw result;
    } else {
      return result;
    }
  };
  return { read };
};

const Hallo = () => {
  const [text, setText] = useState("your on time");
  // useEffect(
  //   setText(
  //     wrapPromise(lazyTimer()).read()
  //   ), [text],
  // );
  return <h2>hello world, {text}</h2>;
};

export default function App() {
  return (
    <div className="App">
      <Suspense fallback={<p>Loading...</p>}>
        <Hallo />
      </Suspense>
    </div>
  );
}

import React，{suspent，useffect，useState}来自“React”；
常数lazyTimer=（）=>{
持续承诺=新承诺（（解决、拒绝）=>{
设置超时（（）=>{
决议（“从过去10秒开始”）；
}, 1000);
});
回报承诺；
};
const wrapPromise=承诺=>{
让status=“挂起”；
让结果；
console.log（“循环…”）；
const吊杆=承诺(
r=>{
状态=“已完成”；
结果=r；
},
e=>{
status=“已拒绝”；
结果=e；
}
);
常量读取=（）=>{
如果（状态==“待定”）{
吊杆；
}否则如果（状态==“已拒绝”）{
投掷成绩；
}否则{
返回结果；
}
};
返回{read}；
};
康斯特哈罗=（）=>{
const[text，setText]=useState（“您的准时”）；
//使用效果(
//塞特克斯(
//wrapPromise（lazyTimer（））.read（）
//），[正文]，
// );
返回hello world，{text}；
};
导出默认函数App（）{
返回(
);
}

编辑3：让我困惑的是悬念，我看不到它是如何运作的。孩子们是如何工作的。在我看来，您在查看文档中的演示代码时做出了承诺。但我在任何地方都没有看到这方面的记录

因此，您抛出了一个承诺，当解决该问题时，您的组件现在已准备就绪（即计时器承诺-或Apollo客户端承诺-获取承诺，等等）。当这个承诺解决后，您的组件现在可以挂载了。我喜欢它，如果我对它的工作原理正确的话，我希望它能被清楚地记录下来

---

这个问题与悬念无关。您的代码：

const Hallo = () => {
  const [text, setText] = useState("your on time");
  useEffect(
  //   setText(
  //     wrapPromise(lazyTimer()).read()
  //   ), [text],
  // );
  return <h2>hello world, {text}</h2>;
};

然后，

text

将不再是依赖项

我推荐3种

---

编辑：

最重要的是，您错误地使用了包装器。我看了一下你可能用过的。他们创建了包装器。然后在数据获取部分（计时器），将它们的承诺包装在承诺包装器中

我尝试使用

useffect

使您的代码尽可能相似：

import React, { Suspense, useEffect, useState } from "react";
import "./styles.css";

const wrapPromise = promise => {
  let status = "pending";
  let result;
  console.log(`looping.... + ${new Date().toString()}`);

  const suspender = promise.then(
    r => {
      status = "fulfilled";
      result = r;
    },
    e => {
      status = "rejected";
      result = e;
    }
  );
  const read = () => {
    if (status === "pending") {
      throw suspender;
    } else if (status === "rejected") {
      throw result;
    } else {
      return result;
    }
  };
  return { read };
};

const lazyTimer = () => {
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(" from 10sec past");
    }, 10000);
  });
  return wrapPromise(promise);
};

const data = lazyTimer();

const Hallo = () => {
  const [text, setText] = useState(data.read());
  useEffect(() => {
    console.log("Im running");
    setText(data.read());
  }, []);

  return <h2>hello world, {text}</h2>;
};

export default function App() {
  return (
    <div className="App">
      <Suspense fallback={<p>Loading...</p>}>
        <Hallo />
      </Suspense>
    </div>
  );
}

import React，{suspent，useffect，useState}来自“React”；
导入“/styles.css”；
const wrapPromise=承诺=>{
让status=“挂起”；
让结果；
log（`looping..+${new Date（）.toString（）}`）；
const吊杆=承诺(
r=>{
状态=“已完成”；
结果=r；
},
e=>{
status=“已拒绝”；
结果=e；
}
);
常量读取=（）=>{
如果（状态==“待定”）{
吊杆；
}否则如果（状态==“已拒绝”）{
投掷成绩；
}否则{
返回结果；
}
};
返回{read}；
};
常数lazyTimer=（）=>{
持续承诺=新承诺（（解决、拒绝）=>{
设置超时（（）=>{
决议（“从过去10秒开始”）；
}, 10000);
});
返还许可（承诺）；
};
const data=lazyTimer（）；
康斯特哈罗=（）=>{
const[text，setText]=useState（data.read（））；
useffect（（）=>{
console.log（“Im正在运行”）；
setText（data.read（））；
}, []);
返回hello world，{text}；
};
导出默认函数App（）{
返回(
);
}

这很有效。沙箱

值得注意的是，halo可能只是：

const Hallo = () => {
  const text = data.read()
  return <h2>hello world, {text}</h2>;
};

const Hallo=（）=>{
const text=data.read（）
返回hello world，{text}；
};

Hi，柴油机。谢谢安瑟。我也喜欢柴油品牌。我在沙箱上试过你的建议。但它仍然循环。我还有其他错误吗？我用你的建议修复沙箱。很好的回答！我真的很感谢你的帮助。我试图在教程中再次学习包装器是如何工作的。我的问题完全解决了。这是最好的答案。

const Hallo = () => {
  const text = data.read()
  return <h2>hello world, {text}</h2>;
};