Когда кнопка нажата в первый раз, почему отображается Tom?

#reactjs #react-native #react-hooks #use-effect #use-state

#reactjs #react-native #реагирующие хуки #использование-эффект #use-state

Вопрос:

 import React, { useState, useEffect } from "react";
import axios from "axios";
const DetailsPage = props => {
  const [user, setData] = useState("Harry");
  const [isShow, setShow] = useState();
  useEffect(() => {
    console.log("Mounted");
    setShow(true);
    return () => {
      console.log("unmount");
    };
  }, [user]);

  return (
    <div>
      {" "}
      <button
        onClick={() => {
          setData("Tom");
          console.log(user);
          setShow(false);
        }}
      >
        {isShow ? <>{user}</> : <>""</>}
      </button>
      {user}
    </div>
  );
};
export default DetailsPage;

Когда я нажимаю на кнопку (после отображения компонента на экране), он показывает Tom как значение кнопки. Может кто-нибудь объяснить мне, как работает этот код?(Почему появляется Tom, почему не «» (пустая строка))

1. Что касается console.log("Mounted"); , пожалуйста, имейте в виду, что useEffect это срабатывает после метода рендеринга, а не точно при монтировании компонента, в отличие componentDidMount от того, что срабатывает при фактическом монтировании.

Ответ №1:

Оба setData и setShow являются асинхронными методами. При вызове setData("Tom") user будет обновляться и useEffect запускаться по мере передачи user в качестве зависимости. Но запуск этого эффекта использования будет немного отложен по сравнению с setShow onClick внутри, потому setData что это асинхронные методы.

Итак, порядок методов

setData(«Tom»)
setShow(false)
Эффект использования.

В последнем useEffect он вызывает setShow(true) , вот почему отображается «Tom».

1. да, это последнее setShow(true) повторно отобразит компонент, тогда Гарри должен быть напечатан правильно?

2. вы уже вызываете setData(«Tom») внутри onClick, поэтому Tom будет напечатан, как только вы нажмете кнопку

3. Tom сохраняется в data состоянии после setData("Tom") , и setShow(true) примет значение isShow true, поэтому {isShow ? <>{user}</> : <>""</>} будет отображаться user «Tom»

4. Хорошо, понял, это действительно хорошее объяснение — спасибо. Наконец-то готово

5. при втором нажатии, даже если вы вызываете setData(«Tom»), useEffect не будет запущен, потому data что уже является Tom, и он не обновляется. setShow(false); будет вызван so, и, наконец isShow , будет false , так что {isShow ? <>{пользователь}</> : <>»»</>} отобразит пустую строку.

Ответ №2:

Когда вы нажимаете кнопку, затем установите пользователя как Tom и установите для показа значение false . при изменении ваших пользовательских данных useEffect будет вызываться функция. затем внутри вашего useEffect , установите show true снова и отобразите значение.

1. да, это последнее setShow(true) повторно отобразит компонент, тогда Гарри должен быть напечатан правильно?

2. Затем установите для пользователя «Harry» значение «Tom»

3. Как насчет второго щелчка, он становится «», пустой строкой — почему это так?