Question

我有一个数据数组，该数据被2组划分，我渲染每个元素的描述并为每个组添加标题，问题是我只能使用全局变量来做到这一点，wich不好，所以有人对如何帮助我解决这个问题有想法吗？非常感谢你

我确实尝试使用let并设置状态。我需要这个

//this is my global var
   var lastGroup;

//this is where i map the data and show it 

{this.state.settings.map((setting, idx) => (
            <div>
   ///here I call the getTitle function that add title to each group
                {this.getTitle( setting.alert_group)}
              <div>
                {this.state.showDescriptiveTitle=true}
                  <div className="settings">
                    <div className="alertType">{setting.description}</div> 
                    <div>
                      <FormGroup>
                        <Switch
                        checked={setting.status}
                        id={idx} 
                        onChange={() => this.onChange(setting, idx)}
                        color="primary"/>
                      </FormGroup>
                    </div>
                  </div>
              </div>

          </div>

//这是我使用全局变量的getTitle函数

getTitle( alert_group){

if(lastGroup !== alert_group){
  lastGroup=alert_group;
  if(alert_group=="D"){
    return( <h6 >Descriptive</h6>);
  }else{
    return(<h6 >Predictive</h6>)
  }    
}

}

这很好用，但是如何不使用全局变量就可以实现

Answer 1

目前还不清楚，您试图通过不使用全局变量来实现什么，也不清楚使用let和state时不起作用。这些是我能想到的选项：

使用const或let代替var，它们将是块作用域而非全局作用域。在这种情况下，您必须处于正确的访问范围。
将lastGroup定义为状态属性，并使用setState()在getTitle()中对其进行更新，然后通过this.state.lastGroup对其进行访问。我怀疑这不起作用，因为您在渲染器中运行getTitle()，这将导致无限循环（状态更改导致重新渲染，重新渲染导致状态更改）。除了在每个渲染器上运行之外，您还必须找出一些运行getTitle()的触发器。
如果您的React组件是一个类，则可以将其定义为类属性（例如，在构造函数中创建this.lastGroup），然后通过this.lastGroup来访问它

我如何在不使用全局变量的情况下使此功能起作用

1 个答案: