useEffect 设置状态后 useEffect 中的状态未定义？

Question

我有一个 React Native 应用程序，我在其中运行一些代码看起来像下面的代码。为什么是下面的输出undefined？从 useEffect 读取 someState 是 undefined 即使状态设置在 useEffect

内部

const SomeComponent = () => {
  const [someState,setSomeState] = useState();
  
  const anFunction = () => {
    let data = 'data'
    return data
  }

  useEffect(() => {
    const theData = anFunction();
    setSomeState(theData)
    console.log(someState)
  },[])

  ...

  // later renders some component
}

我正在尝试设置状态，然后在此 useEffect 中读取状态，因为我想实现类似的东西：

  const doSomethingWithTheState = () => {
    //some transformation here
    setSomeState(transformedData)
  }

  useEffect(() => {
    const theData = anFunction();
    setSomeState(theData)
    
    doSomethingWithTheState()

  },[])

Answer 1

它应该通过添加 .then

来工作

.then(doSomethingWithTheState())

Answer 2

未定义，因为 useEffect 不是 async。您的初始状态已经是 undefined，因此您在 console.log 中看到 undefined。要在 useEffect 中创建异步逻辑，您应该像这样更新

useEffect(() => {
    async function test(){
      //Your logic here
    } 
    test()

  },[])

Answer 3

你可能会从我对类似问题的回答中得到一些东西：

@gloo 在此处发布了关于此问题的更有趣的讨论：

设置状态既不是同步也不是异步。它是 React 生态系统的 quirk/feature。就单个渲染而言，状态是不可变的；因此在下一次渲染之前你永远不会得到更新的状态。

如果您需要在更改状态后直接使用状态，请在 useEffect 中使用依赖项数组中的状态变量进行操作。

Answer 4

因为我的目标是改变 useEffect 中的数据，所以最好使用 anFunction() 初始化我的状态（显然这仍然只是一个例子）。这是我的代码现在的样子：

const SomeComponent = () => {
  const [someState,setSomeState] = useState(anFunction());
  
  const anFunction = () => {
    let data = 'data'
    return data
  }

  useEffect(() => {
    console.log(someState)
  },[])

  ...

  // later renders some component
}

我看到过关于 useState 如何异步的讨论。这是误导。查看 Abe 的回答和他的描述将指导您解决许多奇怪的 React state-setting 行为。

请勿尝试 await 或 async 您在 useEffect 内的状态设置。

useEffect 设置状态后 useEffect 中的状态未定义？

State in useEffect undefined after the useEffect sets the state?

reactjs

react-native