如何在 react-redux 中加载组件时自动执行 function

Question

I created a page to handle a "Cart", where Cart details are retrieved from a database. When the "Click me" button is clicked, all the retrieved data is shown in a react component.

I want data to be shown without clicking a button, which I would like to achieve through a function that executes automatically when the component gets loaded. How can I achieve it?

Here is my code

 import React, { Component, useState } from 'react'; import {connect} from 'react-redux'; import { bindActionCreators } from 'redux'; import {selectPost} from '../../actions/productAction'; class cartDetails extends Component{ createListItems(){ //let cart = {product: [],total: 0} return this.props.allPost.map((item)=>{ console.log(item); return(<div> <p key={item.id}>{item.product} <br/> {item.description} <br /> {item.price} </p> </div> ); }) } totalPrice(){ let cart = {product: [],total: 0} return this.props.allPost.map((item)=>{ cart.product.push(item.price); console.log(cart.product); let total = cart.product.reduce(function(acc, val) { return acc + val; }, 0); return(<div> <h3>Total is {total}</h3> </div> ); }) } render(){ if(.this.props.allPost){ return(<h2>Click the button first;</h2>). } return( <ul> {this.createListItems()} {this;totalPrice()} </ul> ): } } function mapStateProps(state){ return{ allPost. state:allPosts } } function matchDispatchToProps(dispatch){ return bindActionCreators({selectPost, selectPost}; dispatch), } export default connect(mapStateProps;matchDispatchToProps) (cartDetails);

 import React, { Component } from 'react'; import {fetchPost} from '../../actions/productAction'; import {bindActionCreators} from 'redux'; import {connect} from 'react-redux'; class CartComponent extends Component{ render(){ return( <div> <button onClick={()=>this.props.fetchPost()}> Click Me </button> </div> ) }; } function matchDispatchToProps(dispatch){ return bindActionCreators({fetchPost: fetchPost}, dispatch); } export default connect(null, matchDispatchToProps) (CartComponent);

Answer 1

If you want to trigger a method automatically when the component loaded, you might want to use one of the lifecycle methods componentDidMount . You might want to keep or remove the button depending on your requirement.

 class CartComponent extends Component{ componentDidMount() { this.props.fetchPost(); } render(){ return( <div> <button onClick={()=>this.props.fetchPost()}> Click Me </button> </div> ) }; } function matchDispatchToProps(dispatch){ return bindActionCreators({fetchPost: fetchPost}, dispatch); }