如何在不使用全局变量的情况下使此函数工作

Question

I have an array of data which is divided by 2 groups, I render the description of each element and add a title to each group. the thing is I can only do that with a global variable, which is not good. how can I solve this?

I already tried using let and setting a state. I need this in react

//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>

//here is my getTitle function that uses the global variable

getTitle( alert_group){

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

This works just fine, but how can achieve this without using a global variable?

Answer 1

It's not super clear what you're trying to achieve by not using a global variable, nor what didn't work about using let and state . These are the options I can think of:

• Use const or let instead of var , which will be block-scoped rather than global. In this case you'd have to be in the right scope to access it.
• Define lastGroup as a state property and use setState() to update it in getTitle() , and access it via this.state.lastGroup. I suspect this didn't work because you're running getTitle() in the render, which would cause an infinite loop (state change causes re-render, re-render causes state change). You would have to figure out some trigger for running getTitle() other than just on every render.
• If your React component is a class, you could define it as a class property (eg in the constructor create this.lastGroup ) and access it via this.lastGroup