React中mapStateToProps引发Redux reducer无限执行问题求助

问题根源在于：你的Dashboard函数组件直接在函数体内发起axios请求，每次组件渲染（包括Redux state更新触发的重渲染）都会重复执行请求。请求完成后dispatch更新Users state，mapStateToProps感知到state变化后会触发组件再次渲染，最终形成无限循环。

修复方案：使用useEffect控制请求执行时机 #

通过React的useEffect钩子，将请求逻辑包裹起来，并设置空依赖数组，确保请求仅在组件挂载时执行一次：

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import axios from 'axios';

const mapDispatchToProps = dispatch => ({  
  getUsers: (payload) => dispatch({ type: "USERS", payload: payload })
});

const mapStateToProps= state => ({  
  ctr: state.TestReducer,  
  users: state.Users
})  

const Dashboard = (props) => {
  // 仅在组件首次挂载时发起一次请求
  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/users")
      .then(response => {
        props.getUsers(response.data);
      });
  }, []); // 空依赖数组是关键，确保副作用只执行一次

  return (    
    <h1>hello dashboard</h1>  
  )
}

export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);

补充说明 #

• 空数组[]作为useEffect的依赖项，代表这个副作用不依赖任何props或state，只会在组件挂载完成后执行一次，彻底切断循环链。
• 如果后续需要根据特定props/state变化重新发起请求，可将对应变量加入依赖数组（比如[props.userId]），这样仅当该变量变化时才会重新执行请求逻辑。

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