在功能组件中使用带承诺的Reactjs SetState 导出默认功能测试（）{ const[myState，setmyState]=useState（0）； 让我承诺=新承诺（函数（myResolve，myReject）{ setmyState（1）； setTimeout（函数（）{ myResolve（myState）； }, 3000); }); useffect（（）=>{ myPromise.then（函数（值）{ document.getElementById（“demo”）.innerHTML=value； }); }, []); 返回( JavaScript承诺

等待3秒（3000毫秒）以更改此页面

); } 我想更改函数组件中promise函数中state的值。我在这里遇到错误（错误：错误：重新渲染过多。React限制渲染数量以防止无限循环。）

---

真正正常工作的规则是什么？

在每次渲染时都会调用promise构造函数。在它内部调用

setmyState

，它会更新状态，从而触发重新渲染。因此，您有一个无限循环和错误消息

您应该将所有有效的代码放在useEffect中，然后可以使用依赖项数组控制它何时触发。你不需要用承诺。只需设置一个超时，在三秒后更改您的状态

请注意，与其像您那样强制设置innerHTML值，不如执行以下操作：

{myState}

---

这确保您始终可以看到显示的myState的最新值。此声明式样式是React的主要部分

您必须将myPromise声明为useEffect的依赖项，或者在useEffect本身中声明它。即使您将其声明为依赖项，也必须将myPromise包装在useMemo中。因此，最好在useffect本身中声明它。并在useEffect的依赖项数组中声明myState

您的代码应该如下所示：

export default function Test() {
  const [myState, setmyState] = useState(0);

  let myPromise = new Promise(function (myResolve, myReject) {
    setmyState(1);
    setTimeout(function () {
      myResolve(myState);
    }, 3000);
  });
  useEffect(() => {
    myPromise.then(function (value) {
      document.getElementById("demo").innerHTML = value;
    });
  }, []);

  return (
    <div>
      <h2>JavaScript Promise</h2>

      <p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

      <h1 id="demo"></h1>
    </div>
  );
}

导出默认功能测试（）{
const[myState，setmyState]=useState（0）；
useffect（（）=>{
让我承诺=新承诺（函数（myResolve，myReject）{
setmyState（1）；
setTimeout（函数（）{
myResolve（myState）；
}, 3000);
});
myPromise.then（函数（值）{
document.getElementById（“demo”）.innerHTML=value；
});
}，[myState]）；
返回(
JavaScript承诺
等待3秒（3000毫秒）以更改此页面

);
}

您需要删除setmyState（1）；或者改变位置@好的。但我需要设置状态。不要在代码的全局范围（无限循环）中使用设置状态，在函数中使用它

export default function Test() {
    const [myState, setmyState] = useState(0);
  
    useEffect(() => {
        let myPromise = new Promise(function (myResolve, myReject) {
            setmyState(1);
            setTimeout(function () {
                myResolve(myState);
            }, 3000);
        });

        myPromise.then(function (value) {
            document.getElementById("demo").innerHTML = value;
        });
    }, [myState]);

    return (
        <div>
            <h2>JavaScript Promise</h2>

            <p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

            <h1 id="demo"></h1>
        </div>
    );
}