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

我有我在反应中使用的这段代码。这里重要的是该函数返回两个kfl，第一个具有kezdet: 3，第二个具有kezdet: 2。但是lnkfl没有此数字。我的想法是创建一个外部作用域变量，将其设置为映射，然后返回的结尾将是正确的值，然后，当lnkfl的映射处理新元素时，将变量设置为新值，就在最终需要回报之前。但事实并非如此。

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>
        })
    }

控制台首先返回undefined，然后返回3。期望值分别为3和2。在代码片段中，显示了kezdet的值来自何处，最后，我想使用它的地方。这个问题有什么解决方案？

最佳答案

好吧，您实际上是在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总是“晚一个值”。