函数中的异步状态值[重复]

Question

我的布局如下：

<button onClick={joinSession}></button>

我的职能

 const joinSession = () => {
        //set the value this will take some time
        setState({...state, session : someLibrary.initSession()})
        
        const session = state.session;
    
        //it's undefined so the code never gets here...
        session.on('event' , () => {
            console.log('hello');
        })
    
    
    }


const [state, setState] = useState({
    session: undefined,
})

问题是我调用的函数在设置会话状态之前完成运行。在运行其余代码之前，我需要一些方法来等待状态被设置。有点像。那就好了。在类组件中，您可以使用第二个参数并将其传递给setState，但我使用的是函数组件。

我试着用一个promise：

new Promise(resolve => {
return setState({ ...state, session: OV.initSession() });
}).then(res => {
const session = ovState.session;

这没用。。

Answer 1

我不知道为什么需要在那里检索更新的状态值，因为可以继续使用局部变量。

const joinSession = async () => {
  //set the value this will take some time
  let session = await someLibrary.initSession()
  setState((state)=>({...state, session}))
  
  session.on('event' , () => {
      console.log('hello');
  })
}

但是，如果您仍然希望获得那里的状态，可以使用my lib（演示）中的自定义挂钩：

import React, { useState } from "react";
import { useAsyncWatcher } from "use-async-effect2";

const someLibrary = {
  async initSession() {
    await new Promise((resolve) => setTimeout(resolve, 1000));
    return Math.random();
  }
};

function TestComponent(props) {
  const [state, setState] = useState({ test: 456 });
  const stateWatcher = useAsyncWatcher(state);

  const joinSession = async () => {
    let sessionValue = await someLibrary.initSession();
    setState(state=> ({ ...state, session: sessionValue }));
    const currentState = await stateWatcher(); // get the updated state value
    const session = currentState.session;

    console.log("session", session);
  };

  return (
    <div className="component">
      <div className="caption">Test</div>
      <button onClick={() => joinSession()} className="btn btn-info">
        Call async fn
      </button>
    </div>
  );
}

export default TestComponent;

Answer 2

我记得当我第一次想用最新的react钩子更新我的一个程序时，我和你一样感到困惑，因为我经常使用setstate函数回调：

使用useffect可以实现相同的行为：

在您的代码示例中：

const joinSession = async () => {
    // first make sure to get session asyncrounously
    const newSession = await someLibrary.initSession();
    // now set it as new state
    setState({...state, session : newSession})
}

useEffect(()=>{
    // here we are sure that session has changed or component just loaded
    if (state.session) {
        // assuming state.session is a falsy value in initial state
        // now we are sure that session is updated here
        state.session.on('event' , () => {
            console.log('hello');
        })
    }
}, [state.session])