React多属性合并useState中如何正确使用prevState解决分页加载重复问题

• 状态更新逻辑错误：在setState的函数式更新回调中，prevState是包含postsToShow、hover、count三个属性的完整状态对象，原代码直接写count: prevState + 1会把整个状态对象赋值给count，导致count值完全异常。
• setState是异步更新的，调用setState修改count后立即读取state.count，拿到的始终是更新前的旧值，所以每次加载帖子都用了错误的旧参数，只会重复拉取前几篇内容。
• 外层的arrayForHoldingPosts没有做合理的生命周期管理，也会导致内容重复追加。

调整状态更新逻辑，避免依赖异步更新后未生效的状态值，直接传入计算好的最新页数参数加载内容，修改后的核心代码如下：

const [state, setState] = useState({
  postsToShow: [],
  hover: false,
  count: 1
});
const postsPerPage = 3; // 按实际业务配置调整
// posts为全量帖子数据源，按你的实际代码定义补充
const posts = [/* 你的帖子数据 */];

const loopThroughPosts = (currentCount) => {
  const newPosts = [];
  const start = currentCount * postsPerPage - postsPerPage;
  const end = postsPerPage * currentCount;
  for (let i = start; i < end; i++) {
    if (posts[i] !== undefined) {
      newPosts.push(posts[i]);
    }
  }
  // 直接基于旧的postsToShow累加新内容，无需依赖外部临时数组
  setState(prevState => ({
    ...prevState,
    postsToShow: [...prevState.postsToShow, ...newPosts]
  }));
};

// 页面初始化加载第一页内容
useEffect(() => {
  loopThroughPosts(1);
  setState(prevState => ({
    ...prevState,
    count: 2
  }));
}, []);

const handleShowMorePosts = () => {
  // 提前计算下一页页数，直接传给加载函数，规避异步更新的取值问题
  const nextCount = state.count + 1;
  loopThroughPosts(nextCount);
  setState(prevState => ({
    ...prevState,
    count: nextCount
  }));
};

return (
  <div>
    <Posts postsToRender={state.postsToShow} />
    <button
      onClick={handleShowMorePosts}
      onMouseEnter={() =>
        setState(prevState => ({
          ...prevState,
          hover: true
        }))
      }
      onMouseLeave={() =>
        setState(prevState => ({
          ...prevState,
          hover: false
        }))
      }
    >
      加载更多
    </button>
  </div>
);

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