React中状态内元素无法获取更新后状态值的技术咨询

问题核心在于闭包捕获特性和React State的不可变性：

• 当你把JSX元素存入holder这个State时，该元素是在组件初始渲染阶段创建的，它的onMouseDown回调函数会捕获当时的counter初始值（即0）。后续组件重新渲染时，holder的State并未被更新，所以这个回调永远只会使用最初捕获的旧值，导致每次点击都只能将counter设为0+1=1。
• 而nonStateHolder是组件每次渲染时重新生成的，它的回调会捕获当前渲染周期的最新counter值，因此能正常实现递增逻辑。

方案1：不把JSX存入State（最推荐） #

React的设计逻辑是让渲染结果依赖State，而非将渲染结果本身存入State。直接在渲染阶段生成元素，就能确保每次都拿到最新的State值：

import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const [counter, setCounter] = useState(0);
  
  // 直接在渲染时生成元素，无需存入State
  const holderElement = (
    <div
      style={{ height: "50px", width: "50px", backgroundColor: "red" }}
      onMouseDown={() => setCounter(counter + 1)}
    />
  );
  
  const nonStateHolder = [
    <div
      style={{ height: "50px", width: "50px", backgroundColor: "blue" }}
      onMouseDown={() => setCounter(counter + 1)}
    />
  ];
  
  return (
    <div>
      {holderElement} {nonStateHolder} {counter}
    </div>
  );
}

方案2：使用函数式更新（必须存JSX到State时） #

如果因特殊场景需要将JSX存入State，可以使用setCounter的函数式更新写法，直接获取最新的State值，规避闭包捕获旧值的问题：

import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const [counter, setCounter] = useState(0);
  const [holder, setHolder] = useState([
    <div
      key="red-box" // 添加key避免React渲染警告
      style={{ height: "50px", width: "50px", backgroundColor: "red" }}
      // 函数式更新，prevCounter为当前最新的状态值
      onMouseDown={() => setCounter(prevCounter => prevCounter + 1)}
    />
  ]);
  
  const nonStateHolder = [
    <div
      style={{ height: "50px", width: "50px", backgroundColor: "blue" }}
      onMouseDown={() => setCounter(counter + 1)}
    />
  ];
  
  return (
    <div>
      {holder} {nonStateHolder} {counter}
    </div>
  );
}

方案3：同步更新State中的JSX元素 #

若需要holder内的元素随counter变化而更新，可以在counter改变时重新生成并更新holder：

import "./styles.css";
import React, { useState, useEffect } from "react";

export default function App() {
  const [counter, setCounter] = useState(0);
  const [holder, setHolder] = useState([]);
  
  // 每当counter变化时，重新生成holder内的元素
  useEffect(() => {
    setHolder([
      <div
        key="red-box"
        style={{ height: "50px", width: "50px", backgroundColor: "red" }}
        onMouseDown={() => setCounter(counter + 1)}
      />
    ]);
  }, [counter]); // 依赖counter，确保状态变化时触发更新
  
  const nonStateHolder = [
    <div
      style={{ height: "50px", width: "50px", backgroundColor: "blue" }}
      onMouseDown={() => setCounter(counter + 1)}
    />
  ];
  
  return (
    <div>
      {holder} {nonStateHolder} {counter}
    </div>
  );
}

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