异步等待与useStateCallback无法正常工作

如何解决异步等待与useStateCallback无法正常工作

我需要按顺序更新相同的状态：

// lets say this is the state
const [someState,setSomeState] = useState({a: 1,b: 1})

// and i need to update it like so
// from an external function     
setSomeState({a: 2})
// wait until the first one is actually updates
// and do the next one  
setSomeState({b: 2})
// wait until the second one is actually updates
// "tell" the parent function that both are updated

现在我这样做：

// i use a customized hook useStateCallback
function useStateCallback(initialState) {
  const [state,setState] = useReducer((state,newState) => ({ ...state,...newState }),initialState)
  const cbRef = useRef(null)

  const setStateCallback = (state,cb) => {
    cbRef.current = cb
    setState(state)
  }

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

  return [state,setStateCallback]
}

// and execute it like so
// from outside of a component
export const someFunction = async setState => {
    await setState({ a: 2 },() => Promise.resolve())
    await setState({ b: 2 },() => Promise.resolve())
}

但是此回调无法正常工作，并且调用方函数实际上并不等待状态更改。

所以我的问题是：

1. useStateCallback挂钩如何与Promise.resolve()结合使用？
2. Promise.resolve()在这种特殊情况下如何工作？
3. 当第二个状态仅在第一个状态被更新（带有钩子）并且“告诉”它们都已完成更新的父函数时，如何依次更新同一状态？

解决方法

设置的问题是setStateCallback设置回调ref，然后返回。然后从useEffect调用该回调。问题在于，当useEffect被调用时，原始调用函数已经完成。

如果我们只是想确保等待setState完成，则可以通过在setStateCallback中添加useEffect并将其包装在promise中来解决此问题。这基本上就是说，只有在useEffect完成时才能解决。否则就等

  const setStateCallback = (state,cb) => {
    return new Promise((resolve) => {
       cbRef.current = cb
       setState(state)
       useEffect(async () => {
          if (cbRef.current) {
            await cbRef.current(state) // Calls your wrap callback promise here in case there's anything you want to do. Otherwise you don't need that wrapper callback anymore and we can remove this await.
            cbRef.current = null
          }
          resolve();  --> This will basically resolve once useEffect is done calling the functions it needs to call. 
       },[state])
  });

,

您的How i can do this with wireshark? :) 不会返回setStateCallback，但是会接受回调。这就是为什么不能使用Promise语法直接调用它的原因。您只需要一个简单的包装即可 promisify 。

类似的东西：

await

现在您可以将状态设置为：

function useStateCallback(initialState) {
  const [state,setState] = useReducer((state,newState) => ({ ...state,...newState
  }),initialState)
  const cbRef = useRef(null)

  const setStateCallback = (state,cb) => {
    cbRef.current = cb
    setState(state)
  }

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

  const setStateAsync = state => new Promise((resolve,reject) => setStateCallback(state,resolve))

  return [state,setStateCallback,setStateAsync]
}

从现在开始，您可以使用const [state,setStateAsync] = useStateCallback({}) 形式的async。这混合了固定的setStateAsync函数（这次它接受了clear函数）：

async

应该让您使用：

export const clear = async setState => {
    await setState({ isWritable: false })
    await setState({ isVisible: false })
}

具有预期的await clear(setStateAsync); 行为。