Question

我在render内有map函数，如果要在map函数内满足某些条件，我想setState，如何在render函数内设置setState。我有以下代码

render(){
      progressNum = this.state.progressData.map((data,index) => {
      {
      data.status=="unmarked"?
      this.setState({
      checkd:true,
      })
      :
      this.setState({
      checkd:false,
      })

}

....}

问题：循环调用渲染

Answer 1

恕我直言，您不应该在渲染功能中设置状态，因为这会触发另一个渲染，并且您可能最终陷入无限的渲染循环中。

Answer 2

渲染功能不应包含任何副作用。

一个人可以在另一个函数中定义业务处理，然后从渲染器内部调用它。

mineFuntion=()=> {

  const progressData = {...this.state.progressData};

  progressData.map((data, index) => {

      if(data.status == "unmarked"){
        data.checkd =  true;
      }else{
        data.checkd =  false;
      }
      return data;
  });

  return progressData;
}

内部渲染：

render(){
   const progressData = this.mineFuntion();//do UI stuf with progressData 
}

如何在没有onClick事件的情况下在渲染函数中使用setState

2 个答案: