web-dev-qa-db-ja.com

関数はReactで複数回呼び出されます

なぜ関数が複数回wheh dispatchを呼び出す理由を知りたいと思います。また、やるべき方法はありますか

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>
  )
}
 _
javascriptreactjsreduxreact-reduxredux-saga
4
miyavv

ビューにレンダリングがある場合は、renderData関数が呼び出されるかどうかを呼び出し、これもまたコンポーネントを再レンダリングさせます。 1つの解決策をレンダリングの外側にthis.renderData()関数を移動できます。constructorまたはcomponentDidMount

4
Kais