Задержка при обновлении константы в Redux

Question

Я пытаюсь обновить константу с помощью Redux в моем приложении React. Но есть задержка, когда мой обратный вызов, handleChange срабатывает. Это записывает значение перед вызовом setFormValues. Версия реагирования - ^16.8.0, а реакция-редукса - 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

Если вы используете 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);
});

Answer 2

formValues - это простая переменная, которая была установлена ​​при вызове useState в первой строке. Он не изменится во время этой итерации рендеринга.

Когда вызывается handleChange, console.log использует formValues из этой итерации. Только после следующей визуализации компонента setState вернет новое значение, а handleChange будет воссоздано с обновленным значением.