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显示为按钮值。有人可以向我解释此代码的工作原理吗（为什么汤姆出现，为什么不出现“”（空字符串））
这两个setData和setShow是异步方法。当您调用时setData("Tom")，user将被更新并useEffect在您user作为依赖项传递时被触发。但是，与setShowonClick内部相比，这种useEffect触发将稍有延迟，因为这setData是异步方法。
因此，方法顺序为
在上一个useEffect中，它调用setShow(true)，这就是渲染“ Tom”的原因。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句