在useEffect中，如何在运行后续逻辑之前正确先更新状态？

Question

我运行遇到一个问题，其中 useEffect 运行s 中的某些逻辑在触发状态更新之前挂载一次。示例如下：

function App() { 

const [account, setAccount] = useState("0x123");

useEffect(() => {

async function main() {
  let fetchedAccount = await //some fetch logic to get new account

  setAccount(fetchedAccount);
}

console.log(account);
let result = await someFunction(account);
}

我意识到运行这样做时，我的应用程序运行具有预定义状态的逻辑，即 someFunction("0x123") 在运行ning someFunction("updated state from提取帐户”）。因此 console.log(account) 显示一次“0x123”，然后再次显示 fetchedAccount 字符串。

我怎样才能避免这种行为，并在 setAccount(fetchedAccount) 完成后才使用 useEffect 运行 someFunction(accounts)？

以前当它是一个 class 组件时，我使用 this.setState 来更新 'account' 状态并且 someFunction(this.state.account) 工作正常。它没有运行预定义状态，只有运行s 具有 this.setState 之后的更新值。

提前致谢！

Answer 1

尝试添加另一个 useEffect 挂钩，在依赖项数组中包含 'account'。

useEffect(() => {
 if(account !== "0x123"){
  let result = await someFunction(account);
 }
}, [account])

这应该确保 someFunction 仅在帐户值发生变化时才会运行。

编辑：嗯，添加一个条件来检查帐户不是“0x123”是否可以解决您的问题？

此外，您可以将初始状态设置为未定义。

在useEffect中，如何在运行后续逻辑之前正确先更新状态？

In useEffect, how do I correctly update state first before running subsequent logics?

reactjs

use-effect

use-state