problem description
A popular situation in which the parent component updates the render and causes the child component to render again
but now there is a special requirement: there is a button on the parent component to refresh real-time data, and I hope I can uninstall this child component and reload it when I click Refresh. This initializes the state value of the subcomponent.
the environmental background of the problems and what methods you have tried
Specifically, the sub-component changes the value of its state when it is rendered for the first time, and there is an array parameter array in state that I use to judge certain events, which is empty at first, and will continue to fill in some values, while I trigger some events through array.includes (xxx) &. . If I don"t clear the value of state when I click the refresh button, Events that follow & & can never be triggered, resulting in real-time data updates .
related codes
/ / Please paste the code text below (do not replace the code with pictures)
I will briefly simulate the situation
//
const { datasource } = this.state;
render(){
...
return(
<ChildComp data={datasource}></ChildComp>
)
}
//
class ChildComp extends PureComponent{
constructor(arg){
super(arg)
this.state = {
type: []
}
}
componentDidMount(){
this.handleData();
}
componentWillProps(){
this.handleData();
}
handleData(){
const { type } = this.state;
const { data } = this.props;
!type.includes(data.type) && type.push(data.type) && ...
}
}
when I first loaded, I had already filled the data for the child component ChildComp . When the parent component refreshes and triggers the child component willProps re-render, the value of this.state.type already exists data.type , so that subsequent actions cannot be triggered. Is there any solution?
what result do you expect? What is the error message actually seen?
is there an operation in which child components can be reloaded in the parent component?
//
handleRefresh(){
//<ChildComp />
}or is there a better way to solve it?
Thank you!