如何避免useState值更新时重置？能否在空依赖useEffect中初始化useState？

核心问题解析 #

你遇到的不是useState重置状态的问题——useState的初始值只会在组件第一次渲染时生效，后续组件更新时，useState会直接返回当前的状态值，绝不会用初始值重新覆盖。真正的问题是闭包捕获了旧的状态值：你的useEffect是空依赖，里面的loadMoreData函数是第一次渲染时创建的，它捕获的totalNumberOfEntries永远是初始的100，所以每次调用setTotalNumberOfEntries(totalNumberOfEntries + 100)都只会得到200。

解决方案1：修复状态更新的闭包问题 #

使用函数式更新替代直接依赖状态值，React会自动把当前最新的状态值传给你，这样就不受闭包影响了：

import { useEffect, useState } from 'react';

const Data = Array.from(Array(1000).keys());

const Content = (props) =>{
  console.log("from beginning")
  // 初始值仅第一次渲染生效，后续更新不会重置
  const [totalNumberOfEntries, setTotalNumberOfEntries] = useState(100);

  useEffect(() => {
    const observer = new IntersectionObserver(loadMoreData);
    const bottomElement = document.getElementById("bottom");
    if (bottomElement) {
      observer.observe(bottomElement);
    }

    function loadMoreData(entries, observer){
      entries.forEach((entry) => {
        if(entry.isIntersecting === true){
          // 函数式更新：用prev获取最新状态值
          setTotalNumberOfEntries(prev => prev + 100);
        }
      });
    };

    return ()=>{
      observer.disconnect();
    }
  },[]) // 空依赖依然安全，因为用了函数式更新

  return(
    <>
      {
        Array.from({length: totalNumberOfEntries}, (v, i) => i).map(
          (i) => (<div key={i}>{props.data[i]}</div>) // 务必添加key，符合React渲染规范
        )
      }
      <div id="bottom"></div> {/* 需要确保这个元素存在 */}
    </>
  )
}

function App() {
  return (
      <div className="App">
        <Content data={Data}/>
      </div>
  );
}

export default App;

解决方案2：关于在useEffect中初始化状态 #

不能直接在useEffect里调用useState——这违反了React Hook的调用规则：Hook必须在组件顶层、条件判断之外调用。但如果你的初始值需要在组件挂载后才能获取（比如异步请求、DOM元素信息），可以这样做：

const [k, setK] = useState(null); // 先设一个占位初始值

useEffect(() => {
  // 挂载后获取初始值，比如从API、DOM中获取
  const initialK = 100;
  setK(initialK);
}, []);

这样组件第一次渲染时k是null，挂载完成后会被设置为100，后续状态更新也不会被重置。

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