第一次单击按钮时，为什么要渲染 Tom？

Question

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 作为按钮值。有人能解释一下这段代码是如何工作的吗？（为什么汤姆出现，为什么不出现“”（空字符串））

Answer 1

setData和setShow都是异步方法。当您调用 setData("Tom") 时，user 将被更新，并且当您将 user 作为依赖项传递时，useEffect 将被触发。但是这个useEffect的触发会比onClick里面的setShow稍微延迟，因为setData是异步方法。

所以，方法顺序是

setData("汤姆")
setShow(假)
使用效果。

在最后一个 useEffect 中，它正在调用 setShow(true)，这就是渲染“Tom”的原因。

Answer 2

当您点击按钮时，然后将用户设置为 Tom，并将节目设置为 false。更改用户数据时 useEffect 函数将调用。然后在 useEffect 中，再次将显示设置为 true 并呈现值。

第一次单击按钮时，为什么要渲染 Tom？

When button is clicked first time, why Tom is getting rendered?

reactjs

react-native

react-hooks

use-effect

use-state