React中useDispatch调用fetchExternalLinks reducer方法无效问题

核心问题：未正确调用Thunk函数 #

你在useEffect里写的dispatch(fetchExternalLinks)只是把Thunk函数本身传给了dispatch，并没有执行它。Thunk是一个返回函数的函数，必须调用它（添加括号）才能触发内部的异步逻辑。

修复后的useEffect代码 #

useEffect(() => {
    console.log('use effect')
    dispatch(fetchExternalLinks()) // 加上括号，调用Thunk函数
}, []) // 添加空依赖数组，确保仅在组件挂载时执行一次，避免重复触发

额外优化建议 #

1. 给列表项添加唯一key：React列表渲染要求每个元素有唯一标识，避免控制台警告：

{links.map((link) => {
  return <a key={link.path} onClick={() => openWindow(link.path)}>{link.title}</a> 
})}

2. 规范JSX结构：直接写文本Links:不符合JSX语法规范，用标签包裹更稳妥：

return (
    <div>
        <span>Links:</span>
        {links.map((link) => {
          return <a key={link.path} onClick={() => openWindow(link.path)}>{link.title}</a> 
        })}
    </div>
)

修改完成后，控制台应该会打印test，Redux的异步请求也能正常执行，获取到数据后即可渲染出对应的外部链接。

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