为什么 setState 不更新我的状态值？ [复制]答案

【问题标题】：Why is setState not updating my state value? [duplicate]为什么 setState 不更新我的状态值？ [复制]
【发布时间】：2021-10-20 11:59:50
【问题描述】：

function LoginComponent(){
  const [clicked, setClicked] = useState(false)
  
  function handleClick(){
    console.log('before', clicked)
    setClicked(true)
    console.log('after', clicked)
  }
  return(
    <a onClick={handleClick}>
      random text
      </a>
  )
}

当我运行它时，控制台在 false 之后输出 false。为什么是这样？我不知道为什么会这样。

【问题讨论】：

状态是异步更新的，并且在组件的特定渲染中是恒定的。组件在重新渲染之前无法看到更新的状态。您可以使用useEffect 挂钩查看更新状态：useEffect(() => { console.log(clicked) }, [clicked])
clicked 在const [clicked, setClicked] = useState(false) 行中分配仅。调用setState 将更新内部状态，导致next 调用useState 以返回新值，但它也不能自动更改您的局部变量clicked。（您可以改写类似setClicked(clicked = true) 的内容并将const 更改为let，以便clicked 可以更改。）
这能回答你的问题吗？ setState doesn't update the state immediately

标签： javascript reactjs

【解决方案1】：

因为设置状态是一个异步动作。更新需要一些时间。 Check react documentation link to know more

您可以通过

查看更新后的值

    useEffect(()=> { 
         console.log("clicked", clicked);
 },[clicked]);

【讨论】：

【解决方案2】：

这种行为有几个原因：

状态是异步更新的
在任何特定的渲染中，状态和道具都不会改变，只有在组件重新渲染时才会反映变化

如果要记录clicked的更新值，请将日志语句放在useEffect钩子中。

您无法在同一渲染中更新和记录任何状态变量的更新值。组件将不得不重新渲染以反映由于状态更新而发生的变化。

同样，如果您想调用更新值为clicked 的函数，请从useEffect 挂钩内部调用该函数。

【讨论】：

【解决方案3】：

setClicked 是异步的。您必须检查useEffect中更新的状态

function LoginComponent(){
  const [clicked, setClicked] = useState(false)
  
  function handleClick(){
    setClicked(true)
  }

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

  return(
    <a onClick={handleClick}>
      random text
      </a>
  )
}

【讨论】：