代码之家 › 专栏 › 技术社区 › MitchEff

React钩子会随时更新

react-hooks reactjs

MitchEff · 技术社区 · 5 年前

所以,我使用钩子来管理一组表单的状态,设置如下:

    const [fieldValues, setFieldValues] = useState({}) // Nothing, at first

设置该值时,状态不会更新:

    const handleSetValues = values => {
        const _fieldValues = {
            ...fieldValues,
            ...values
        }

        setFieldValues(_fieldValues)

        console.log(fieldValues) // these won't be updated

        setTimeout(() => {
            console.log(fieldValues) // after ten seconds, it's still not updated
        },10000)
    }

如果我第二次调用该函数,它将已更新,但这对我不起作用。我从未在类组件中看到过这样的行为。

这是为了…喜欢,而不是更新吗?或者只是随时更新?令人困惑的行为。

0 回复 | 直到 5 年前

Zain Ul Abideen 5 年前

setFieldValues(_fieldValues) 是一个异步调用,意味着您将无法在下一行中获得结果。

您可以使用 useEffect 钩子。

useEffect(() => {
    // do your work here
  }, [fieldValues]);

从你的问题来看,你似乎有React类组件的背景,所以 使用效果 类似于 componentDidMount 和 componentDidUpdate 生命周期方法。

使用效果 每当依赖关系数组中的状态(在您的例子中为[fieldValues])发生变化,并且您在中获得更新的值时,就会调用 使用效果 身体。

你也可以表演 componentWillUnmount 工作在 使用效果 也。

简要介绍一下 guide .

Agney Sidharth yadav 5 年前

setFieldValues 是一个异步函数,因此记录语句下方的值不会有任何影响。

关于使用 setTimeout ,该函数将捕获传递给它的道具的当前值,因此这将是打印到控制台的值。这适用于任何JS函数,请参阅下面的代码片段:

function init(val) {
  setTimeout(() => {
      console.log(val);
  }, 1000);
}

let counterVal = 1;

init(counterVal);
counterVal++;

那么,当值发生变化时,我们如何打印这些值呢?简单的机制是使用 useEffect :

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

推荐文章

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Agrim Singh · 对象无效,因为使用React router dom时显示React子错误

1 年前

Anaya Ammar · 渲染后未显示的值

1 年前

matin kahrizi · 当我的状态更改时,useSelector不更新

1 年前

YotiPoti · 我的照片太大了,无法容纳我的HTML画布。我该怎么办?

1 年前

Zemelon · -moz背面可见性不适用于顺风css

1 年前

Abdelaziz Elrasheed · 如何成为专业的网页开发人员。。。?[已关闭]

1 年前

JustTrynaProgram · React和Tailwind-从配置中读取自定义断点值

1 年前

Mark C. · 制作一个可松开的单选按钮[关闭]

1 年前

Tridip Lodh · 在ES6中,JAVASCRIPT函数在“严格使用”模式下的行为如何?[已关闭]

1 年前