React useEffect中console.log无打印输出问题求解

你遇到的现象本质是两个React核心机制导致的，不是console没执行，是执行结果和你预期完全不符，让你误以为没有输出：

• 首先React的状态更新是异步批处理的，同一段同步执行的代码里，调用setXxx不会立刻修改当前闭包里的状态变量值，所有状态更新会在当前同步任务执行完后统一触发重渲染，新的状态值只有在下一次渲染生成的新闭包里才能拿到。
  你在同一个useEffect回调里刚调用setHref(window.location.href)，紧接着读取的href还是useState初始化的空字符串，所以后续setWhatever(href + " cats")实际设置的值是" cats"，两个console.log打印的也都是初始空字符串，很容易被误以为没输出内容。
• 其次你给useEffect传了空依赖数组[]，这个effect只会在组件首次挂载完成后执行1次，执行时捕获的永远是组件首次渲染时的初始状态，后续状态更新既不会让这个effect重跑，也没法在这个已经执行完的回调里拿到更新后的状态，属于典型的React闭包陷阱。
  如果确实控制台完全看不到任何打印，先检查浏览器控制台的过滤规则，是不是把普通log级别的输出过滤掉了，只要组件正常挂载，这段代码里的console一定会执行。

根据你的需求选对应写法即可：

不需要单独持久化href状态的场景 #

如果不需要在其他地方复用href的值，直接在effect里用普通变量取值计算即可，完全不需要多设一个状态：

const [whatever, setWhatever] = useState("");

useEffect(() => {
  const currentHref = window.location.href;
  const targetWhatever = `${currentHref} cats`;
  setWhatever(targetWhatever);

  console.log(currentHref);
  console.log(targetWhatever);
}, []);

需要同时维护href和whatever两个状态的场景 #

拆成两个effect，单独监听href的变化来更新whatever和打印日志，避免闭包拿到旧值：

const [href, setHref] = useState("");
const [whatever, setWhatever] = useState("");

// 仅组件挂载时获取一次href
useEffect(() => {
  setHref(window.location.href);
}, []);

// href更新后同步更新whatever并打印
useEffect(() => {
  if (!href) return; // 跳过初始空值的无效执行
  const targetWhatever = `${href} cats`;
  setWhatever(targetWhatever);
  
  console.log(href);
  console.log(targetWhatever);
}, [href]);

内容的提问来源于stack exchange，提问作者za1234ki