Reactjs 第一次单击按钮时，为什么会渲染Tom？ import React，{useState，useffect}来自“React”； 从“axios”导入axios； const DetailsPage=props=>{ const[user，setData]=useState（“Harry”）； const[isShow，setShow]=useState（）； useffect（（）=>{ 控制台日志（“已安装”）； 设置显示（正确）； return（）=>{ 控制台日志（“卸载”）； }; }，[用户]； 返回( {" "} { setData（“Tom”）； console.log（用户）； 设置显示（假）； }} > {isShow？{user}:} {user} ); }; 导出默认详细信息页面；

当我点击按钮时（在屏幕上呈现组件之后），它将Tom显示为按钮值。有人能解释一下这段代码是如何工作的吗？（为什么Tom出现，为什么不是“”（空字符串））

这两种

setData

和

setShow

都是异步方法。 当您调用

setData（“Tom”）

时，

user

将被更新，并且当您将

user

作为依赖项传递时，

useffect

将被触发。 但与onClick内部的

setShow

相比，此useEffect触发将稍微延迟，因为

setData

是异步方法

所以，方法顺序是

• setData（“Tom”）
• 设置显示（假）
• 使用效果

---

在上一个useffect中，它调用了

setShow（true）

，这就是“Tom”被渲染的原因。

当您单击按钮时，将用户设置为Tom，并将显示设置为

false

。更改用户数据时，

useffect

函数将调用。然后在

useffect

中，再次将show设置为

true

并渲染值。

是的，最后一次设置show（true）将重新渲染组件，那么Harry应该被打印出来，对吗？您已经在onClick中调用了setData（“Tom”），因此，一旦您单击按钮，Tom将被打印。

setData（“Tom”）

之后，Tom将存储在

data

状态，而setShow（true）将使

isShow

为true，因此

{isShow？{user}:“}

将呈现

user

即“Tom”好的，明白了，这是一个非常好的解释-谢谢。最后，在第二次单击中，即使您调用setData（“Tom”），也不会触发useffect，因为

数据

已经是Tom，并且没有更新。so

setShow（假）将被调用，最后
isShow
将为false，因此{isShow？{user}:“}将呈现空字符串。是的，最后一个setShow（true）将重新呈现组件，然后Harry应该正确打印？然后将用户“Harry”设置为“Tom”第二次单击如何，它将变为“”，空字符串-为什么？关于
console.log(“Mounted”）；
请注意，
useffect
是在渲染方法之后触发的，而不是在组件装载时触发的，这与实际装载时触发的
componentDidMount
不同。
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;