如何在react redux中加载组件时自动执行功能

Question

我创建了一个页面来处理；Cart"；，其中从数据库中检索购物车详细信息。当"；点击我"按钮，所有检索到的数据都显示在react组件中。

我希望在不单击按钮的情况下显示数据，我希望通过加载组件时自动执行的函数来实现这一点。我怎样才能做到这一点？

这是我的代码

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

如果您想在加载组件时自动触发一个方法，您可能需要使用其中一个生命周期方法componentDidMount。根据您的要求，您可能希望保留或删除该按钮。

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);
}