如何在React生命周期方法中正确分发Action？遇无限循环等问题求助

首先得先指出你代码里的一个小错误，这可能是导致部分问题的根源：你的mapStateToProps写法有误，没有正确返回包含auth的对象。原来的写法：

const mapStateToProps = ({ auth }) => { auth };

这里的大括号是代码块，没有return语句，所以实际返回的是undefined，正确的写法应该是：

const mapStateToProps = ({ auth }) => ({ auth });
// 或者用return：
// const mapStateToProps = ({ auth }) => { return { auth }; };

这个错误会导致props.auth始终是undefined，这也是你之前在componentWillMount里调用getCart报错的原因之一。

接下来解决你遇到的两个核心问题：

1. 避免getCart无限循环 #

你之前用componentWillReceiveProps导致无限循环，是因为这个生命周期钩子会在任何props变化时触发，而调用getCart可能会更新Redux中的cart状态，进而触发组件重新渲染，再次进入componentWillReceiveProps，形成循环。

推荐使用componentDidMount + componentDidUpdate组合，并添加条件判断，只有当auth真正变化时才调用getCart：

import { getCart } from "../../actions";
class Cart extends Component {
  componentDidMount() {
    // 因为App组件已经判断auth不为null才渲染Cart，所以这里auth一定就绪
    this.props.getCart(this.props.auth.googleId);
  }

  componentDidUpdate(prevProps) {
    // 只有当auth发生变化时，才重新调用getCart
    if (prevProps.auth !== this.props.auth) {
      const googleId = this.props.auth ? this.props.auth.googleId : null;
      this.props.getCart(googleId);
    }
  }

  render() {
    // ...你的渲染逻辑
  }
}

// 修正后的mapStateToProps
const mapStateToProps = ({ auth }) => ({ auth });
export default connect(mapStateToProps, { getCart })(Cart);

2. 改用函数组件+useEffect（更简洁的方案） #

如果你可以将Cart组件改为函数组件，使用React的useEffect钩子会更简洁，它能自动处理挂载和更新的逻辑，同时通过依赖数组避免不必要的重复执行：

import { useEffect } from 'react';
import { connect } from 'react-redux';
import { getCart } from "../../actions";

const Cart = ({ auth, getCart }) => {
  useEffect(() => {
    const googleId = auth ? auth.googleId : null;
    getCart(googleId);
  }, [auth, getCart]); // 只有auth或getCart变化时，才执行回调

  return (
    // ...你的渲染内容
  );
};

const mapStateToProps = ({ auth }) => ({ auth });
export default connect(mapStateToProps, { getCart })(Cart);

为什么这个方案可行？ #

• 组件挂载时，useEffect会执行一次，此时App已经确保auth不为null，所以能正确获取googleId；
• 依赖数组[auth, getCart]确保只有当auth发生变化，或者getCart引用变化时，才会重新执行回调，完美避免无限循环。

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