Функция вызывается несколько раз в реакции

Question

Я хотел бы знать, почему функция вызывается несколько раз при отправке. Кроме того, есть ли лучший способ сделать,

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

Я обновил другой сценарий того же типа, мне нужно знать, есть ли другой лучший способ.

сценарий 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>
  )
}

Answer 1

Когда в поле зрения отображается визуализация, вызывается функция renderData, которая отправляет какое-либо действие, и это снова вызывает повторную визуализацию вашего компонента. Одним из решений может быть перемещение вашей this.renderData() функции за пределы рендера, это может быть constructor или componentDidMount

Answer 2

render функция будет вызываться каждый раз Обновление класса React.

Если ваше действие queryData предназначено для извлечения данных для отображения в компоненте, поместите их внутри componentDidMount. Он будет вызван только один раз, когда компонент React впервые смонтирован.