当前位置: 首页 > 知识库问答 >
问题:

在react js中获取挂钩(异步/useState内部)中结果更新状态的解决方案

公孙宸
2023-03-14

如何使用setState在更新后正确获取结果状态。下面是我从中得到的代码示例,它与我的代码类似,为什么在异步函数中不更新react hook值。但仍然没有解决这个问题的办法。很多帮助都会有帮助。非常感谢。

import React, { Component, useState } from "react";
import { render } from "react-dom";

function App() {
 const [value, setValue] = useState('old');

 const run = async() => {
  setValue('new')
  const data = await wait(500)
  console.log(value)
 }

return (
  <button onClick={run}>
    Run
  </button>
);
}

 render(<App />, document.getElementById("root"));

 function wait(ms) {
   return new Promise(resolve => setTimeout(resolve, ms))
 }

共有2个答案

西门旻
2023-03-14

您需要像这样使用useEfect

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

司寇安宜
2023-03-14

你不能控制国家。反应控制。在您要求对更改存储状态作出反应后,您不应假定它将在何时更新。也许下一毫秒,也许下一年(我只是为了说明一点而夸大)。您的组件始终呈现当前状态,因此当React最终更改状态值时,它将重新运行您的组件。在一次运行中,您将状态值放入React不会更新的变量中,因为它是本地的。它是封闭的内部效应,即使需要反应,它也不能将新值赋给它不知道的变量。

因为您的组件是纯的(不是真的,但为了简单起见,让我们坚持使用这个术语),所以您不会有副作用。您可以礼貌地要求React对某些事件执行一些副作用—DOM事件(如onClick以处理程序的形式放置副作用),或者使用useffect钩子对每个渲染执行副作用。使用useEffect,您可以限制react实际运行副作用的时间。使用dependencies数组,您可以说“嘿,React,能否请您在初始渲染和更改此值时运行此副作用?”。

总而言之,要跟踪状态值的变化,您还需要一个useffecthook,您可以100%肯定地说状态值发生了变化。它将如下所示:

function App() {
  const [value, setValue] = useState("old");

  useEffect(
    function () {
      console.log(value);
    },
    [value]
  );
  const run = async () => {
    setValue("new");
    const data = await wait(500);
    console.log(value);
  };

  return <button onClick={run}>Run</button>;
}

但有时这也只是解决方案的一部分。有时,您只希望在依赖项值为“新”时运行副作用,而不希望在依赖项值为“旧”时运行副作用。在这种情况下,您可以在效果中添加额外的检查,如果它不是您想要的值,则可以提前返回

function App() {
  const [value, setValue] = useState("old");

  useEffect(
    function () {
      if (value !== "new") return;
      console.log(value);
    },
    [value]
  );
  const run = async () => {
    setValue("new");
    const data = await wait(500);
    console.log(value);
  };

  return <button onClick={run}>Run</button>;
}

虽然这几乎是足够的,但通常最好将状态和与所述状态效果联系在一起,或者使用一些专门的“状态管理”解决方案,其中副作用是一流的公民。

 类似资料:
  • 我有一个对象的状态数组: 我有一个添加按钮,用于将对象添加到数组中,这是onclick事件的主体:

  • 我真的很喜欢新的React钩子,我经常在我正在做的项目中使用它们。我遇到了一种情况,我想在hook中使用prevState,但我不确定如何做到这一点。 我尝试过类似的东西,但它无法编译。 (顺便说一句,这是映射一组复选框,以跟踪打了复选标记的复选框) 我试图在这里遵循这个例子,但是不使用setState函数。 谢谢你的帮助!

  • 我正在尝试使用状态将一个表单输入值复制到另一个表单输入值,但状态没有更新 我创建了一个带有按钮的表单,其中左侧表单输入的值应复制到右侧表单输入。这是我的代码: 无论我做什么,dbSecName的状态都不会改变。我试着设置一个新的常量。我尝试使onclick函数异步并等待。如果我为我试图设置的变量的值添加,我可以正确地看到它,但是dbSecName的console.log总是显示原始值。 我真的不知

  • 我正在构建一个制表符视图,我不明白为什么useState钩子没有更新我的状态。我肯定这是件容易的事,但我在这里已经被难住了一段时间... 我可以看到onPress函数已启动,如果我注销,则item.label是正确的。但是,即使我硬编码参数,setState也不会更改。

  • 我正在试用新的反应挂钩,并有一个时钟组件,计数器应该每秒钟增加一次。但是,该值不增加超过1。

  • 问题内容: 我正在尝试新的React Hooks,并有一个带有计数器的Clock组件,该计数器应该每秒增加一次。但是,该值不会增加到超过一。 问题答案: 原因是传递给的闭包中的回调仅访问第一个渲染器中的变量,而无法访问后续渲染器中的新值,因为第二次未调用。 回调中的值始终为0 。 就像您熟悉的状态挂钩一样,状态挂钩有两种形式:一种是处于更新状态的状态,另一种是将当前状态传入的回调形式。您应该使用第