Javascript 跟踪使用promise-JS在组件外部更新的状态

我有一个外部函数，它通过

ref

和

importivehandler

hook更改组件内部的状态

const [state, setState] = useState(0);

// inside component
const testFunc = () => {
   setState(1)
}

// outside of component
function *generator {
    yield ...
    yield testFunc()
    // next yield should wait till state is updated, only then it can be executed 
    yield ...
}

但我不知道如何跟踪已更改的状态，因为

setState

hook没有回调选项。

---

如何在外部函数（如我的

生成器

示例）中跟踪状态更改的时刻

您可以为此承诺创建一个特例：

//内部命令句柄
specialStateSetter:（）=>{
//你的逻辑/追踪器在这里
setState（{value:0}）
}

因为setState没有回调选项

setState

可以传递第二个参数，该参数是更新状态后执行的回调函数

参考：

由于setState没有回调选项，如何跟踪状态更改的时刻

你错了。有以下内容的回调：

---

由于您使用的是钩子，并且updater函数没有收到类似于类updater版本的第二个参数，因此您可能希望自己使用第二个参数实现更新程序：

function useStateWithCallback(initState) {
  const cbRef = useRef(null);

  const [state, setState] = useState(initState);

  useEffect(() => {
    if (cbRef.current) {
      cbRef.current(state);
      cbRef.current = null;
    }
  }, [state]);

  const updater = (value, callback) => {
    cbRef.current = typeof callback === "function" ? callback : null;
    setState(value);
  };

  return [state, updater];
}

• 我们使用相同的签名创建自己的

  useState

  ，这是一个接受初始状态并返回当前状态元组和更新函数的函数，但这次更新程序函数接受两个参数，下一个状态和一个回调

• 我们需要一种方法来存储传递给更新程序的回调，我们可以使用

  useState

  将其存储在一个状态中，但每次更新都会触发一个渲染，因此我们将其存储在一个ref中，该ref在渲染过程中保持不变，但在更新时不会触发重新渲染。我们从一个

  null

  值开始

• 我们使用

  useState

• 我们将效果同步到此状态值，并调用存储在ref中的回调。我们有条件地这样做，因为效果将在任何状态更新之前的第一次渲染中运行（这就是为什么我们以

  null

  启动ref）

• 我们创建自己的

  updater

  函数，该函数将回调存储在ref中（同时验证它确实是一个函数），并触发实际的状态更新

• 我们返回带有真实状态和自定义更新程序的元组

运行示例：

const{useState，useRef，useffect}=React；
函数useStateWithCallback（initState）{
const cbRef=useRef（null）；
const[state，setState]=useState（initState）；
useffect（（）=>{
if（cbRef.电流）{
cbRef.当前（状态）；
cbRef.current=null；
}
}，[州]；
常量更新程序=（值，回调）=>{
cbRef.current=typeof callback==“function”？callback:null；
设置状态（值）；
};
返回[状态，更新程序]；
}
函数App（）{
const[count，setCount]=useStateWithCallback（0）；
const myCallback=currentState=>console.log（“currentState”，currentState）；
const onClick=（）=>{
setCount（c=>c+1，myCallback）；
};
返回{count}；
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render(
,
根元素
);

您没有看到被多次提到的
hooks
这个词吗？
setState
不是hook，您的意思可能是
useState
。如果是，如果需要帮助，您可能需要提供正确的代码示例。我的代码中到底有什么不正确？通常，用于设置状态的状态处理程序从
set
prefix@jay_dtr你在误导我们。您应该显示告诉我们您正在使用useState钩子的代码。@Bhojendra Rauniyar，您是对的。我更新了代码我使用钩子，正如标题中提到的。hook的setState是否有回调选项？您可以，但我看不到您正在使用react hook。您更新的问题将不起作用。状态在useState中没有值。无论如何，你应该查看我在帖子下方的评论中链接的帖子。谢谢你的解释，但我仍然不完全了解你的
更新程序的工作原理。如果我想在回调时将setState钩子包装到
newpromise
和
resolve（）
中，这样我就可以使用
then（）
，而不是每次
返回新承诺时都重复（resolve=>setState（{some_state}，resolve）
？
function useStateWithCallback(initState) {
  const cbRef = useRef(null);

  const [state, setState] = useState(initState);

  useEffect(() => {
    if (cbRef.current) {
      cbRef.current(state);
      cbRef.current = null;
    }
  }, [state]);

  const updater = (value, callback) => {
    cbRef.current = typeof callback === "function" ? callback : null;
    setState(value);
  };

  return [state, updater];
}