React mapStateToProps 状态无限调用减速器

Question

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

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

const Dashboard = (props) => { 
  axios.get("https://jsonplaceholder.typicode.com/users")
    .then(function(response) {
      props.getUsers(response.data);
    });

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

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

当我在

mapStateToProps

中添加用户减速器时，在浏览器控制台中，来自 redux 记录器的减速器将无限执行，如下所示在此处输入图像描述

我想将从 axios 获得的用户存储到用户减速器中。我想使用

mapStateToProps

中的状态来访问那些用户，以便我可以将其用作道具

users

。但问题是 redux 记录器无限地在我的 Web 浏览器控制台中记录状态，如图所示。

如何阻止这种情况？

我尝试了很多方法，但没有找到合适的解决方案。

Answer 1

问题在于

Dashboard

组件发出 Axios 请求是无意的副作用。将数据获取移动到

useEffect

钩子中，作为有意的副作用来启动。

const Dashboard = (props) => {
  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/users")
      .then(function(response) {
        props.getUsers(response.data);
      });
  }, []);

  return <h1>hello dashboard</h1>;
}