Реагировать useState не обновляет значение в функции asyn c

Question

const Login = () => {
  const [data, setData] = useState({
    name: "",
    email: "",
    password: ""
  });
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(""); // set empty error state

  const handleChange = event =>
    setData({ ...data, [event.target.name]: event.target.value });

  const handleSubmit = async event => { // async function to handle submit
    event.preventDefault();

    try {
      setIsLoading(true);

      const response = await axios.post( // response from server
        "http://localhost:5000/api/users/signup",
        JSON.stringify(data),
        {
          headers: {
            "Content-Type": "application/json"
          }
        }
      );
      console.log(response.data); // data comes back fine
      setIsLoading(false);
    } catch (err) {
      const message = err.response.data.message;
      setError(message); // set error message if there is an error
      setIsLoading(false); // always successfully setLoading to false
      console.log(isLoading); // result is false
      console.log(message); // result message
      console.log(error); // result is still empty string. state never updated with message
    }
  };

Не могу понять, почему состояние ошибки не обновляется в блоке перехвата. Я всегда получаю сообщение и могу зарегистрировать сообщение, но состояние никогда не обновляется до сообщения. Я заметил, что если я отправлю форму несколько раз при повторной отправке, состояние обновится.

Любая помощь приветствуется.

Answer 1

Для любого побочного эффекта , такого как сетевой вызов, обновление данных которого асин c по своей природе. Вы должны использовать useEffect . Это решит проблему. Чтобы повторно использовать логи c, можно создать пользовательских хуков . См. Пример: Пользовательские крючки

Использование Эффект:

useEffect(
  () => {
    const subscription = props.source.subscribe();
    return () => {
      subscription.unsubscribe();
    };
  },
  [props.source],
);

Пользовательский крючок:

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}