React中array.map传id到API URL及路由跳转状态问题咨询

1 首次点击id为undefined的原因 #

React的setState是异步批量更新的，你调用setSelectedGroup(group)之后，马上读取selectedGroup.id拿到的还是更新前的旧值（初始是空对象，所以id为undefined），第二次点击时读取的是第一次更新后的值，所以才会出现首次点击失效的问题。你后续通过useEffect监听selectedGroup更新后再dispatch的解决方法是可行的，但还有更简化的实现方案。 #

2 带跳转按钮状态未同步的解决方案 #

原因是Link/带to属性的Button会在点击事件触发后立即执行跳转，Redux的状态更新还没完成就已经进入新页面，导致新页面读取到的还是旧的状态值。可以通过手动控制跳转时机解决：

实现步骤： #

1. 移除Button上的to和as={Link}属性，取消默认跳转
2. 从react-router-dom导入useNavigate获取手动跳转方法
3. 在确认id已经存入Redux之后，再执行跳转

示例代码： #

import { useNavigate } from 'react-router-dom'

const GroupsScreen = () => {
    const navigate = useNavigate()
    const [groups, setGroups] = useState([]);
    const dispatch = useDispatch();    

    // 可以直接删除selectedGroup状态和对应的监听useEffect，简化逻辑
    const routePick = (group) => {
        // 直接用传入的group.id，不需要依赖本地state更新
        dispatch(routeRequest({id: group.id}));
        // 状态更新完成后手动跳转
        navigate('/this_group')
    };

    // 剩余代码保持不变...
    <Button onClick={() =>routePick(group)} variant="primary">Entrar</Button>
}

更推荐的方案：路由参数传id #

不需要将id存在Redux，直接把id放在跳转路由的参数里，新页面直接从路由读取id，既避免了状态同步问题，刷新页面后id也不会丢失：

1. 路由配置为：/this_group/:groupId
2. 跳转时直接传参：navigate(/this_group/${group.id})
3. 新页面用useParams获取id：

import { useParams } from 'react-router-dom'

const ThisGroupPage = () => {
    const { groupId } = useParams()
    const getUsersData = async () => {
        const response = await fetch("http://lms.bo.be.test/api/courses/" + groupId + "/users")
        // 剩余逻辑...
    }
}

3 代码可优化点 #

• 删除冗余的异步thunk封装：routeRequest里没有任何异步逻辑，不需要写thunk，直接在组件内dispatchrouteSetaction即可，减少不必要的代码层级。
• 新页面请求逻辑加判空：发起用户列表请求前先判断id是否存在，避免出现/courses/null/users的错误请求。
• 接口域名统一封装：不要在每个请求里硬写完整接口路径，抽离公共baseURL，后续修改环境时只需修改一处配置。
• 错误处理完善：接口请求的错误可以加上用户提示，不要只打印在控制台，方便排查线上问题。

内容的提问来源于stack exchange，提问作者J.Saga