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

【问题标题】：How to use setState inside render function without onClick event如何在没有 onClick 事件的情况下在渲染函数中使用 setState
【发布时间】：2019-01-09 22:53:09
【问题描述】：

我在渲染内部有地图功能，如果地图功能内部满足某些条件，我想设置状态，如何在渲染功能内部设置状态。我有以下代码

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

}

....}

问题：循环调用渲染

【问题讨论】：

你已经在做setState。你有什么问题吗？
很难说你到底想做什么。你不应该直接在render() 中调用setState()，这是肯定的。
状态不应该在渲染函数中单独设置，它应该被触发

标签： reactjs react-native render

【解决方案1】：

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

【讨论】：

我知道但我如何设置状态或将数据传递给另一个函数
你可以在不设置状态的情况下传递数据......你可以根据你当前的状态进行操作而不需要设置它

【解决方案2】：

渲染函数不应包含任何副作用。

可以在另一个函数中定义业务处理并从render内部调用它。

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 
}

【讨论】：