为什么更改内部内部函数时外部变量不会动态更改？

Question

I have this code which i use in react. The important things here is that the function returns two kfl s, 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

Well, you're essentially setting kezdet inside a .sor . But you're calling the .sor after you first use your 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>

So your kezdet is always "one value late".