如何在 React 生命周期方法中正确调度操作？

Question

朋友们大家好我的父组件 (App.jsx) 中有一个名为 checkSession() 的操作。此操作可帮助我获取用户信息。
这是 App.jsx 的样子：

class App extends Component {
  componentWillMount() {
    this.props.checkSession();
  }
  render() {
    if (this.props.auth === null) {
      return <div>Loading...</div>;
    } else {
       return (
         <BrowserRouter>
           <Route path="/cart" component={Cart} />
         </BrowserRouter>
      );
    }
  }
}
const mapStateToProps = ({ auth }) => { auth };
export default connect(mapStateToProps, { checkSession })(App);

如何在 Cart.jsx 组件内正确调度另一个动作。我尝试在 componentWillReceiveProps 方法中分派操作，但它创建了一个无限循环。我的 Cart.jsx 组件如下所示：

import { getCart } from "../../actions"; 

class Cart extends Component {
  componentWillReceiveProps(nextProps, nextState) {
    if (nextProps.auth) {
      this.props.getCart(nextProps.auth.googleId);
    } else {
      this.props.getCart(null);
    }
  }
  render() {
    ......some staff  
  }
}
const mapStateToProps = ({ auth }) => { auth };
export default connect(mapStateToProps, { getCart })(Cart);

我刚刚尝试在 ComponentWillMount 中发送这个动作 - 但我的道具还没有准备好，所以我得到了一个错误。请帮我提供任何建议，对不起我的英语。

Answer 1

也许您必须在触发调度之前检测道具是否已更改：

componentWillReceiveProps(nextProps, nextState) {
    const currentId = this.props.auth && this.props.auth.googleId;
    const nextId = nextProps.auth && nextProps.auth.googleId;
    if (currentId !== nextId) {
        this.props.getCart(nextProps.auth.googleId);
    }
}

如何在 React 生命周期方法中正确调度操作？

How do I properly dispatch actions inside the React Lifecycle Methods?

javascript

action

reactjs

redux

react-lifecycle