就像 extension or 创建的类组件中的 .setState（） 一样，使用 hook 提供的更新程序的状态更新也是异步的，不会立即反映出来。React.ComponentReact.PureComponentuseState

此外，这里的主要问题不仅仅是异步性质，而是函数根据其当前闭包使用状态值，状态更新将反映在下一次重新渲染中，现有闭包不受影响，但会创建新的闭包。现在在当前状态下，钩子中的值由现有闭包获取，当发生重新渲染时，闭包会根据是否再次重新创建函数进行更新。

即使您添加了 the 函数，尽管超时将在重新渲染发生一段时间后运行，但仍将使用其先前闭包中的值，而不是更新后的闭包。setTimeoutsetTimeout

setMovies(result);
console.log(movies) // movies here will not be updated

如果要对状态更新执行操作，则需要使用钩子，就像在类组件中使用一样，因为返回的 setter 没有回调模式useEffectcomponentDidUpdateuseState

useEffect(() => {
    // action on update of movies
}, [movies]);

就更新状态的语法而言，会将状态中的先前值替换为异步请求中可用的值。setMovies(result)movies

但是，如果要将响应与先前存在的值合并，则必须使用状态更新的回调语法以及正确使用分布语法，例如

setMovies(prevMovies => ([...prevMovies, ...result]));

_{上一个答案的其他详细信息：}

虽然 React 是异步的（包括类和钩子），并且很容易用这个事实来解释观察到的行为，但这并不是它发生的原因。setState

TLDR：原因是围绕不可变值的闭合范围。const

解决 方案：

• 读取 render 函数中的值（不在嵌套函数中）：

    useEffect(() => { setMovies(result) }, [])
    console.log(movies)
  

• 将变量添加到依赖项中（并使用 react-hooks/exhaustive-deps eslint 规则）：

    useEffect(() => { setMovies(result) }, [])
    useEffect(() => { console.log(movies) }, [movies])
  

• 使用临时变量：

    useEffect(() => {
      const newMovies = result
      console.log(newMovies)
      setMovies(newMovies)
    }, [])
  

• 使用可变引用（如果我们不需要状态并且只想记住值 - 更新 ref 不会触发重新渲染）：

    const moviesRef = useRef(initialValue)
    useEffect(() => {
      moviesRef.current = result
      console.log(moviesRef.current)
    }, [])
  

解释为什么会这样：

如果异步是唯一的原因，则可以 .await setState()

但是，假定两者在 1 次渲染期间保持不变。propsstate

将其视为不可变的。this.state

使用钩子时，通过将常量值与关键字一起使用来增强此假设：const

const [state, setState] = useState('initial')

该值在 2 个渲染之间可能不同，但在渲染本身和任何闭包中保持常量（即使在渲染完成后仍存在更长时间的函数，例如，事件处理程序，在任何 Promise 或 setTimeout 中）。useEffect

考虑以下虚假但同步的类似 React 的实现：

// sync implementation:

let internalState
let renderAgain

const setState = (updateFn) => {
  internalState = updateFn(internalState)
  renderAgain()
}

const useState = (defaultState) => {
  if (!internalState) {
    internalState = defaultState
  }
  return [internalState, setState]
}

const render = (component, node) => {
  const {html, handleClick} = component()
  node.innerHTML = html
  renderAgain = () => render(component, node)
  return handleClick
}

// test:

const MyComponent = () => {
  const [x, setX] = useState(1)
  console.log('in render:', x) // ✅
  
  const handleClick = () => {
    setX(current => current + 1)
    console.log('in handler/effect/Promise/setTimeout:', x) // ❌ NOT updated
  }
  
  return {
    html: `<button>${x}</button>`,
    handleClick
  }
}

const triggerClick = render(MyComponent, document.getElementById('root'))
triggerClick()
triggerClick()
triggerClick()

<div id="root"></div>

// replace
return <p>hello</p>;
// with
return <p>{JSON.stringify(movies)}</p>;

现在你应该看到，你的代码确实有效。不起作用的是 .这是因为指向旧状态。如果将 移到 ，则在返回的正上方，您将看到更新的 movies 对象。console.log(movies)moviesconsole.log(movies)useEffect

我刚刚用 useReducer 完成了重写，遵循 Kent C. Dodds 的文章（参考下面的文章），这确实给了我一个坚实的结果，没有受到这些闭合问题的影响。

请参见：https://kentcdodds.com/blog/how-to-use-react-context-effectively

我把他的可读样板压缩到我喜欢的枯燥程度——阅读他的沙盒实现将向你展示它实际上是如何工作的。

import React from 'react'

// ref: https://kentcdodds.com/blog/how-to-use-react-context-effectively

const ApplicationDispatch = React.createContext()
const ApplicationContext = React.createContext()

function stateReducer(state, action) {
  if (state.hasOwnProperty(action.type)) {
    return { ...state, [action.type]: state[action.type] = action.newValue };
  }
  throw new Error(`Unhandled action type: ${action.type}`);
}

const initialState = {
  keyCode: '',
  testCode: '',
  testMode: false,
  phoneNumber: '',
  resultCode: null,
  mobileInfo: '',
  configName: '',
  appConfig: {},
};

function DispatchProvider({ children }) {
  const [state, dispatch] = React.useReducer(stateReducer, initialState);
  return (
    <ApplicationDispatch.Provider value={dispatch}>
      <ApplicationContext.Provider value={state}>
        {children}
      </ApplicationContext.Provider>
    </ApplicationDispatch.Provider>
  )
}

function useDispatchable(stateName) {
  const context = React.useContext(ApplicationContext);
  const dispatch = React.useContext(ApplicationDispatch);
  return [context[stateName], newValue => dispatch({ type: stateName, newValue })];
}

function useKeyCode() { return useDispatchable('keyCode'); }
function useTestCode() { return useDispatchable('testCode'); }
function useTestMode() { return useDispatchable('testMode'); }
function usePhoneNumber() { return useDispatchable('phoneNumber'); }
function useResultCode() { return useDispatchable('resultCode'); }
function useMobileInfo() { return useDispatchable('mobileInfo'); }
function useConfigName() { return useDispatchable('configName'); }
function useAppConfig() { return useDispatchable('appConfig'); }

export {
  DispatchProvider,
  useKeyCode,
  useTestCode,
  useTestMode,
  usePhoneNumber,
  useResultCode,
  useMobileInfo,
  useConfigName,
  useAppConfig,
}

用法与此类似：

import { useHistory } from "react-router-dom";

// https://react-bootstrap.github.io/components/alerts
import { Container, Row } from 'react-bootstrap';

import { useAppConfig, useKeyCode, usePhoneNumber } from '../../ApplicationDispatchProvider';

import { ControlSet } from '../../components/control-set';
import { keypadClass } from '../../utils/style-utils';
import { MaskedEntry } from '../../components/masked-entry';
import { Messaging } from '../../components/messaging';
import { SimpleKeypad, HandleKeyPress, ALT_ID } from '../../components/simple-keypad';

export const AltIdPage = () => {
  const history = useHistory();
  const [keyCode, setKeyCode] = useKeyCode();
  const [phoneNumber, setPhoneNumber] = usePhoneNumber();
  const [appConfig, setAppConfig] = useAppConfig();

  const keyPressed = btn => {
    const maxLen = appConfig.phoneNumberEntry.entryLen;
    const newValue = HandleKeyPress(btn, phoneNumber).slice(0, maxLen);
    setPhoneNumber(newValue);
  }

  const doSubmit = () => {
    history.push('s');
  }

  const disableBtns = phoneNumber.length < appConfig.phoneNumberEntry.entryLen;

  return (
    <Container fluid className="text-center">
      <Row>
        <Messaging {...{ msgColors: appConfig.pageColors, msgLines: appConfig.entryMsgs.altIdMsgs }} />
      </Row>
      <Row>
        <MaskedEntry {...{ ...appConfig.phoneNumberEntry, entryColors: appConfig.pageColors, entryLine: phoneNumber }} />
      </Row>
      <Row>
        <SimpleKeypad {...{ keyboardName: ALT_ID, themeName: appConfig.keyTheme, keyPressed, styleClass: keypadClass }} />
      </Row>
      <Row>
        <ControlSet {...{ btnColors: appConfig.buttonColors, disabled: disableBtns, btns: [{ text: 'Submit', click: doSubmit }] }} />
      </Row>
    </Container>
  );
};

AltIdPage.propTypes = {};

现在，在我所有页面上，所有内容都顺利地保留了下来

React 的 useEffect 有自己的状态/生命周期。它与状态的突变有关，在效果被破坏之前，它不会更新状态。

只需在参数状态中传递单个参数或将其保留为黑色数组，它就可以完美地工作。

React.useEffect(() => {
    console.log("effect");
    (async () => {
        try {
            let result = await fetch("/query/countries");
            const res = await result.json();
            let result1 = await fetch("/query/projects");
            const res1 = await result1.json();
            let result11 = await fetch("/query/regions");
            const res11 = await result11.json();
            setData({
                countries: res,
                projects: res1,
                regions: res11
            });
        } catch {}
    })(data)
}, [setData])
# or use this
useEffect(() => {
    (async () => {
        try {
            await Promise.all([
                fetch("/query/countries").then((response) => response.json()),
                fetch("/query/projects").then((response) => response.json()),
                fetch("/query/regions").then((response) => response.json())
            ]).then(([country, project, region]) => {
                // console.log(country, project, region);
                setData({
                    countries: country,
                    projects: project,
                    regions: region
                });
            })
        } catch {
            console.log("data fetch error")
        }
    })()
}, [setData]);

或者，你可以尝试 React.useRef（） 在 React 钩子中即时更改。

const movies = React.useRef(null);
useEffect(() => {
movies.current='values';
console.log(movies.current)
}, [])

我知道已经有很好的答案了。但我想给出另一个想法如何解决同样的问题，并访问最新的“电影”状态，使用我的模块 react-useStateRef 它每周有 11,000+ 次下载。

正如你所理解的，通过使用 React 状态，你可以在每次状态更改时呈现页面。但是通过使用 React ref，你总是可以得到最新的值。

因此，该模块允许您同时使用 state's 和 ref's。它向后兼容 ，因此您只需替换语句即可react-useStateRefReact.useStateimport

const { useEffect } = React
import { useState } from 'react-usestateref'

  const [movies, setMovies] = useState(initialValue);

  useEffect(() => {
    (async function() {
      try {

        const result = [
          {
            id: "1546514491119",
          },
        ];
        console.log("result =", result);
        setMovies(result);
        console.log("movies =", movies.current); // will give you the latest results
      } catch (e) {
        console.error(e);
      }
    })();
  }, []);

更多信息：

• 反应-usestsateref

我发现这很好。例如，不要将状态（方法 1）定义为，

const initialValue = 1;

const [state,setState] = useState(initialValue)

试试这个方法（方法2），

const [state = initialValue,setState] = useState()

这解决了不使用 useEffect 的重新渲染问题，因为我们不关心它在这种情况下的内部闭包方法。

P.S.：如果您担心在任何用例中使用旧状态，则需要使用带有 useEffect 的 useState，因为它需要具有该状态，因此在这种情况下应使用方法 1。

使用我库中的自定义钩子，您可以等待状态值更新：

1. useAsyncWatcher(...values):watcherFn(peekPrevValue: boolean)=>Promise- 是 useEffect 的 promise 包装器，可以等待更新并返回一个新值，如果可选参数设置为 true，则可能返回上一个值。peekPrevValue

(现场演示)

    import React, { useState, useEffect, useCallback } from "react";
    import { useAsyncWatcher } from "use-async-effect2";
    
    function TestComponent(props) {
      const [counter, setCounter] = useState(0);
      const [text, setText] = useState("");
    
      const textWatcher = useAsyncWatcher(text);
    
      useEffect(() => {
        setText(`Counter: ${counter}`);
      }, [counter]);
    
      const inc = useCallback(() => {
        (async () => {
          await new Promise((resolve) => setTimeout(resolve, 1000));
          setCounter((counter) => counter + 1);
          const updatedText = await textWatcher();
          console.log(updatedText);
        })();
      }, []);
    
      return (
        <div className="component">
          <div className="caption">useAsyncEffect demo</div>
          <div>{counter}</div>
          <button onClick={inc}>Inc counter</button>
        </div>
      );
    }
    
    export default TestComponent;

2. useAsyncDeepState是一个深层状态实现（类似于 this.setState （patchObject）），其 setter 可以返回与内部效果同步的 promise。如果调用 setter 时不带参数，则它不会更改状态值，而只是订阅状态更新。在这种情况下，您可以从组件内部的任何位置获取状态值，因为函数闭包不再是障碍。

(现场演示)

import React, { useCallback, useEffect } from "react";
import { useAsyncDeepState } from "use-async-effect2";

function TestComponent(props) {
  const [state, setState] = useAsyncDeepState({
    counter: 0,
    computedCounter: 0
  });

  useEffect(() => {
    setState(({ counter }) => ({
      computedCounter: counter * 2
    }));
  }, [state.counter]);

  const inc = useCallback(() => {
    (async () => {
      await new Promise((resolve) => setTimeout(resolve, 1000));
      await setState(({ counter }) => ({ counter: counter + 1 }));
      console.log("computedCounter=", state.computedCounter);
    })();
  });

  return (
    <div className="component">
      <div className="caption">useAsyncDeepState demo</div>
      <div>state.counter : {state.counter}</div>
      <div>state.computedCounter : {state.computedCounter}</div>
      <button onClick={() => inc()}>Inc counter</button>
    </div>
  );
}

var [state,setState]=useState(defaultValue)

useEffect(()=>{
   var updatedState
   setState(currentState=>{    // Do not change the state by get the updated state
      updateState=currentState
      return currentState
   })
   alert(updateState) // the current state.
})

使用后台计时器库。它解决了我的问题。

const timeoutId = BackgroundTimer.setTimeout(() => {
    // This will be executed once after 1 seconds
    // even when the application is the background
    console.log('tac');
}, 1000);

关闭并不是唯一的原因。

基于（简化如下）的源代码。在我看来，价值永远不会立即分配。useState

发生的情况是，当您调用 时，更新操作将排队。在计划启动后，只有在您进行下一次渲染时，这些更新操作才会应用于该状态。setValue

这意味着即使我们没有闭包问题，react 版本也不会立即为您提供新值。新值甚至在下一次渲染之前都不存在。useState

  function useState(initialState) {
    let hook;
    ...

    let baseState = hook.memoizedState;
    if (hook.queue.pending) {
      let firstUpdate = hook.queue.pending.next;

      do {
        const action = firstUpdate.action;
        baseState = action(baseState);            // setValue HERE
        firstUpdate = firstUpdate.next;
      } while (firstUpdate !== hook.queue.pending);

      hook.queue.pending = null;
    }
    hook.memoizedState = baseState;

    return [baseState, dispatchAction.bind(null, hook.queue)];
  }

function dispatchAction(queue, action) {
  const update = {
    action,
    next: null
  };
  if (queue.pending === null) {
    update.next = update;
  } else {
    update.next = queue.pending.next;
    queue.pending.next = update;
  }
  queue.pending = update;

  isMount = false;
  workInProgressHook = fiber.memoizedState;
  schedule();
}

还有一篇文章以类似的方式解释了上述内容，https://dev.to/adamklein/we-don-t-know-how-react-state-hook-works-1lp8

如果我们只需要更新状态，那么更好的方法是使用 push 方法执行此操作。

这是我的代码。我想将 Firebase 中的网址存储在状态下。

const [imageUrl, setImageUrl] = useState([]);
const [reload, setReload] = useState(0);

useEffect(() => {
    if (reload === 4) {
        downloadUrl1();
    }
}, [reload]);


const downloadUrl = async () => {
    setImages([]);
    try {
        for (let i = 0; i < images.length; i++) {
            let url = await storage().ref(urls[i].path).getDownloadURL();
            imageUrl.push(url);
            setImageUrl([...imageUrl]);

            console.log(url, 'check', urls.length, 'length', imageUrl.length);
        }
    }
    catch (e) {
        console.log(e);
    }
};

const handleSubmit = async () => {
    setReload(4);
    await downloadUrl();
    console.log(imageUrl);
    console.log('post submitted');
};

此代码用于将 URL 作为数组置于状态。这可能也适合您。

不是说要这样做，但是在没有useEffect的情况下做OP要求的事情并不难。

使用 promise 解析 setter 函数主体中的新状态：

const getState = <T>(
  setState: React.Dispatch<React.SetStateAction<T>>
): Promise<T> => {
  return new Promise((resolve) => {
    setState((currentState: T) => {
      resolve(currentState);
      return currentState;
    });
  });
};

这就是你使用它的方式（示例显示了UI渲染中和/之间的比较）：countoutOfSyncCountsyncCount

const App: React.FC = () => {
  const [count, setCount] = useState(0);
  const [outOfSyncCount, setOutOfSyncCount] = useState(0);
  const [syncCount, setSyncCount] = useState(0);

  const handleOnClick = async () => {
    setCount(count + 1);

    // Doesn't work
    setOutOfSyncCount(count);

    // Works
    const newCount = await getState(setCount);
    setSyncCount(newCount);
  };

  return (
    <>
      <h2>Count = {count}</h2>
      <h2>Synced count = {syncCount}</h2>
      <h2>Out of sync count = {outOfSyncCount}</h2>
      <button onClick={handleOnClick}>Increment</button>
    </>
  );
};

无需任何额外的 NPM 包

//...
const BackendPageListing = () => {
    
    const [ myData, setMyData] = useState( {
        id: 1,
        content: "abc"
    })

    const myFunction = ( x ) => {
        
        setPagenateInfo({
        ...myData,
        content: x
        })

        console.log(myData) // not reflecting change immediately

        let myDataNew = {...myData, content: x };
        
        console.log(myDataNew) // Reflecting change immediately

    }

    return (
        <>
            <button onClick={()=>{ myFunction("New Content")} }>Update MyData</button>
        </>
    )

我也遇到了同样的问题。正如上面的其他答案已经澄清了这里的错误，即异步，您正在尝试使用紧跟在 之后的值。由于 的异步性质，它不会在部分更新，它允许您执行进一步的代码，而值更新发生在后台。因此，您正在获得以前的值。在后台完成 后，它将更新该值，您将可以在下一次渲染时访问该值。useStatesetStateconsole.log()setStatesetState

如果有人有兴趣详细了解这一点。这是一个关于这个主题的非常好的会议演讲。

https://www.youtube.com/watch?v=8aGhZQkoFbQ

这里的大多数答案都是关于如何根据以前的值更新状态，但我不明白这与问题有什么关系

useState set 方法不会立即反映更改

反应 18

useState 是异步的：

当触发某个代码的事件发生时，代码开始运行，当它结束时，react 将检查是否有状态更新，如果是这种情况，则只有这样才会更新钩子的值，这会导致新的渲染，其中新值可用。useState

const [example,setExemple] = useState("")
//...
<button
  onClick={() => {
    const newValue = "new";
    setExample(newValue);
    console.log(example); // output "" and this is normal, because the component didn't rerenderd yet so the new value is not availabe yet
  }}
>
  Update state
</button>

假设我们有一个场景，我们有一个依赖于另一个状态的状态，例如，我们想根据每次更新时的新值进行 API 调用，然后将来自响应的数据存储在另一个状态中。
为了实现这一点，我们有两种方法：exampleanotherExample

1. 使用 newValue 的值：

<button
  onClick={async () => {
    const newValue = "new";
    const response = await axios.get(`http://127.0.0.1:5000/${newValue}`);
    setExample(newValue);
    setAnotherExample(response.data);
  }}
>
  test
</button>

由于您知道它将接收此值，因此您可以直接基于它创建逻辑。example

2. 通过在其依赖项数组中包含 example，触发 useEffect 在每次更新示例时运行：

<button
  onClick={() => {
    const newValue = "new";
    setExample(newValue);
  }}
>
  test
</button>

useEffect(() => {
 async function test(){
  const response = await axios.get(`http://127.0.0.1:5000/${example}`);
  setAnotherExample(response.data);
 } 
 test();
}, [example])

因此，当使用组件重新渲染的事件函数更新时，我们现在处于一个新的不同渲染中，一旦完成，就会运行，因为 example 的值与上次渲染期间的值不同，并且由于它是一个新的不同渲染，useState 钩子的新值在这里可用。exampleuseEffectexample

注意：在第一次挂载期间，钩子无论如何都会运行。useEffect

哪种方法更好？

• 虽然第一种方法将在一次渲染🙂中完成所有工作（一种更好的方法）“React 将多个状态更新分组到单个重新渲染中以获得更好的性能”，但第二种方法将在两次渲染中完成，第一个在更新时完成，第二个在内部😕更新时完成exampleanotherExampleuseEffect

• 由于组件仅在钩子的新值与旧值不同时重新渲染，因此 when 等于组件不会重新渲染，因此不会运行并且不会更新（更好的方法），但是在第一种方法中，无论如何都会调用 API，如果没有必要，我们不想这样做，如果发生这种情况也会更新🙂（将收到相同的它已经包含的数据，因为它是相同的 REQUEST，因为它等于 ），但是如果对象或数组中的响应，则方法（钩子利用的）无法检测新值是否等于前一个值，因此，组件将重新呈现 😕useStatenewValueexampleuseEffectanotherExampleanotherExampleanotherExamplenewValueexampleObject.isuseState

结论：

如上所述，每个都有其优点，因此取决于用例。

第二种方法更推荐，但在某些情况下，第一种方法的性能可能更高，例如，当您确定代码仅在使用 时运行，或者当您想要使用其他一些局部变量时，您将无法再从内部访问useEffectnewValueonChange

React 中 useState 钩子返回的 setState 函数不会立即更新状态。相反，它会计划在下一个渲染周期中处理状态更新。这是因为 React 出于性能原因对状态进行批处理更新。

如果尝试在调用 setState 后立即访问更新的状态，则可能不会立即看到更新的值。相反，您可以使用 useEffect 挂钩在状态更新后执行操作。

以下示例演示了如何使用 useEffect 在状态更新后执行操作

 import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // This effect will run after each state update
    console.log('Count has been updated:', count);
  }, [count]);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};

在上面的示例中，useEffect 钩子用于在每次状态更新后记录更新的计数值。通过将 [count] 作为依赖项数组传递给 useEffect，效果将仅在计数状态更改时运行。

⚠️ 功能组件

我相信一个超级干净的方法是创建一个自定义钩子，它提供了将回调传递给 setter 函数的能力，那么在状态更新后准确地执行一些操作将是 100% 的保证。

通过查看这篇文章，您可以了解如何制作钩子。使用 定义状态如下所示：useStateCallbackuseStateCallback

const [count, setCount] = useStateCallback(0);

const handleFooBar = () => {
  setCount(c => c + 1, () => { // The callback function
    // All actions here will be run exactly AFTER the update of the count state
  })
};

问题

我的问题并不是在调用set方法后立即尝试访问状态。在重新渲染发生后，我试图以完全不同的功能执行此操作，但更新仍然没有反映出来。目标函数是在功能组件中定义的，但它是从类组件调用的。

就我而言，我最终意识到这是由陈旧的关闭引起的问题。这可能是因为类组件不使用功能，因此我的代码中的类组件采用了传递给它的函数并创建了它的副本或其他东西，并且该副本没有使用对我的变量的最新引用。不过，直接传递给类组件的实际变量仍然得到了正确的反映。useState

溶液

用功能组件替换类组件为我解决了这个问题。