Why outer variable isn't change dynamically when changing inside inner functions?

Question

I have this code which i use in react. The important things here is that the function returns two kfls, and the first has kezdet: 3, the second has kezdet: 2. But the lnkfl don't have this numbers. My idea was to create an outer scoped variable, the map sets it, then the end of the return, it will be the correct value, then, when the map of lnkfl processes the new element, the variable is set the new value, just before the return on the end needs it. But it isn't.

feladatsorok = () => {
        const {nézet, kozvetlenFl, feladatok, lnkfl} = this.state

        let kezdet;
        
        return lnkfl.map(lnkfl => {
            const sor = () => {
                return kozvetlenFl[nézet]
                .filter(kfl => kfl.lnkfl === lnkfl)
                .map(kfl => {
                
                
                
                    kezdet = kfl.kezdet //i want to use kfl.kezdet...
                    
                    
                    
                    const fl = () => {
                        return feladatok[nézet]
                        .filter(fl => fl.legnagyobbSzuloId === kfl.legnagyobbSzuloId)
                        .map(fl => {
                            return <div style={{
                                gridColumn: `${fl.sorkezdet + 1 } / span ${fl.hossz}`,
                                gridRow: fl.szint + "/ span 1",
                                border: "1px solid",
                                overflow: "hidden"
                            }}>
                                {fl.nev}
                            </div>
                        })
                    }
    
                    return <div style = {{
                        gridColumn: `${kfl.dk + 1} / span ${kfl.hossz}`,
                        backgroundColor: "purple",
                        gridRow: "1 / 2",
                        display: "grid",
                        gridTemplateColumns: `repeat( ${kfl.hossz} , 1fr)`,
                        gridTemplateRows: "repeat(" + kfl.sorok + ", 1fr)"
                    }}>
                        {fl()}
                    </div>
                })
            }
            console.log(kezdet)
            return <div style = {{
            
            
            
                gridRow: kezdet + " / span 1", //...here
                
                
                
                gridColumn: "start",
                display: "grid",
                gridTemplateColumns: feladatfilternezetalapjan(),
                gridTemplateRows: "1fr",
                backgroundColor: "yellow"
            }}>
                {sor()}
            </div>
        })
    }

The console returns undefined first, then 3. The expected values are 3, and 2. Inside the code snippet, i was shown that where the value of kezdet came from, and at the end, where i want to use it. What's the solution for this problem?

Answer 1

嗯，你基本上是在kezdet内设置.sor。但是，您在第一次使用.sor后时调用kezdet -

return <div style = {{            
  // for the first 'lnkfl.map' element, 'kezdet' is still undefined here         
  gridRow: kezdet + " / span 1", 
  gridColumn: "start",
  display: "grid",
  gridTemplateColumns: feladatfilternezetalapjan(),
  gridTemplateRows: "1fr",
  backgroundColor: "yellow"
  }}>
     {sor()} // setting 'kezdet' for the first time
  </div>

所以你的kezdet总是“迟到一个值”。