React Redux状态未实时更新 首次点击Load More需两次触发问题

你遇到的首次点击需要点两次才加载16张图的问题，核心是闭包捕获旧状态+Redux状态更新异步导致的：

• Redux的dispatch触发状态更新是异步的，调用dispatch之后不会立刻拿到最新的store值
• 组件每次渲染时生成的fetchImages、loadMore函数，会捕获当前渲染周期内的limit值，你在loadMore里刚dispatch完就调用fetchImages，此时函数里拿到的还是点击前的旧limit，永远比store里的真实值慢一拍：
  • 初始limit=8，第一次点击：dispatch把store里的limit改成16，但fetchImages用的还是旧值8，请求回来8张图
  • 第二次点击：dispatch把store里的limit改成24，但fetchImages用的是上一轮渲染拿到的16，才请求回来16张图
• 另外代码里还有低级笔误：渲染列表时写的imgaes.map变量名拼写错误，也会导致渲染异常。

不要把dispatch更新状态和数据请求强耦合在同一个点击事件里，用useEffect监听limit的变化，状态更新后自动用最新的limit发起请求，点击按钮只负责触发状态更新即可，从根源上避免闭包拿旧值的问题。

你的globalState.js里的slice逻辑本身没有问题，不需要修改，修正后的组件代码如下：

import { useDispatch, useSelector } from 'react-redux';
import { useEffect, useState } from 'react';
import axios from 'axios';
// 注意替换成你项目里对应的action导入路径
import { incrementLimitGallery } from './globalState.js';

const API = "https://www.example.com/images/";
// 抽离初始limit常量，用于判断是否是首次未点击状态
const INITIAL_LIMIT = 8;

export default function ImageGallery() {
  const dispatch = useDispatch();
  const limit = useSelector((state) => state.global.limit);
  // 统一小驼峰命名规范
  const [images, setImages] = useState(null);

  useEffect(() => {
    const fetchImages = async () => {
      const response = await axios.get(`${API}${limit}`);
      if ("error" in response.data) {
        setImages(null);
      } else {
        setImages(response.data);
      }
    };

    // 初始状态limit为8时不发起请求，只有用户点击后limit大于初始值才拉取
    // 如果需要页面打开就自动加载初始8张图，删掉这个if判断即可
    if (limit > INITIAL_LIMIT) {
      fetchImages();
    }
  }, [limit]); // 把limit作为依赖，每次limit更新都自动用新值拉取图片

  const loadMore = () => {
    dispatch(incrementLimitGallery());
  };

  return (
    <>
      {/* 修正images的拼写错误 */}
      <div>
        {images ? (
          images.map(image => (
            // 保留你原有的图片项渲染逻辑
          ))
        ) : null}
      </div>
      <div>
        <button onClick={loadMore}>Load More</button>
      </div>
    </>
  );
}

改完之后的逻辑符合预期：

• 首次点击按钮，dispatch把limit从8改成16，useEffect监听到limit变化，用最新的16发起请求，直接加载16张图
• 后续每次点击，limit每次加8，useEffect都会拿到最新的limit值发起请求，不会再出现慢一拍的问题

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