web-dev-qa-db-fra.com

La fonction est appelée plusieurs fois dans réagir

J'aimerais savoir pourquoi la fonction est appelée plusieurs fois. Aussi, y a-t-il un meilleur moyen de faire,

getData = (value) =>{
  const body = {
    value: value,
    cn: "TH"
  }
return body;
}

renderData(){
  console.log("starts");
  this.props.dispatch(queryData(this.getData(10)));// called repeatedly 
}

render(){
  return(
   <div>{this.renderData()}</div>
  ) 
}

J'ai mis à jour les différents scénarios par même type, j'ai besoin de savoir s'il existe un autre meilleur moyen de.

scénario 2

getData = () =>{
  const body = {
    value: value,
    cn: "TH"
  }
return body;
}
componentDidMount=()=>{
  this.props.dispatch(queryData(this.getData()))
}
componentDidUpdate = () => {
const {allstate} = this.props.querydata 
  if(this.props.querydata){
    this.renderState(allstate);
  }
}
renderState = (data) => {
  const getId = data.map(e=>e.id); //will get array of values [2, 3, 4]
  getid.map(e=>
    this.props.dispatch(queryState(e))); //for every id dispatch props, 
  )
}
render(){
  // will gets this by componentDidMount call
  return (
    <div>

   </div>
  )
}
javascriptreactjsreduxreact-reduxredux-saga
4
miyavv

Quand il y a de la vue en vue, renderData fonction est appelée qui envoie une certaine action, et encore une fois, rendez-vous à votre composant re-rendu. Une solution peut être déplacer votre fonction this.renderData() _ Fonction à l'extérieur du rendu, peut être dans constructor ou componentDidMount _

4
Kais

render fonction sera appelée à chaque fois React classe est mise à jour.

Si votre action queryData consiste à récupérer des données à afficher dans le composant, placez-la à l'intérieur componentDidMount. Il ne sera appelé qu'une fois lorsque React composant d'abord monté.

0
Nhon Dinh