Question

我正在尝试在我的React应用程序中使用Redux更新常量。但是触发回调handleChange会有所延迟。它在调用setFormValues之前记录值。 react版本为^16.8.0，react-redux为7.1.1

Login.jsx

  const [formValues, setFormValues] = useState({ email: ' ', password: ' ' });

  const handleChange = (e) => {
    const updatedValues = { password: '', email: e.target.value };
    setFormValues(updatedValues);
    console.log(formValues);
  };

Answer 1

formValues是一个简单变量，是在第一行调用useState时设置的。在此渲染迭代期间，它不会更改。

调用handleChange时，console.log使用该迭代中的formValues。仅在下一次渲染组件之后，setState才会返回新值，并使用更新后的值重新创建handleChange。

Answer 2

如果我使用的是React Hooks，则可以使用useEffect来记录/操作每次更新的新值，如下所示：

import React, { useState, useEffect } from 'react';

...

const [formValues, setFormValues] = useState({ email: ' ', password: ' ' });

const handleChange = (e) => {
  const updatedValues = { password: '', email: e.target.value };
  setFormValues(updatedValues);
};

useEffect(() => {
  console.log(formValues);
});

Redux中更新常量时的延迟

Login.jsx

2 个答案: