当它已经在 useEffect 回调中设置时，为什么在 const 中未定义 useState 变量？

Question

我正在尝试访问由 useState 创建的变量，但是当我尝试访问它时它是未定义的。 当我使用 useClick 调用 function 时，我可以访问它，但当我将它放在 useEffect 中时则不能。

function Viewer(props) {
    
    const [lines, setLines] = useState()
    const [linesToDisplay, setLinesToDisplay] = useState()

    useEffect(() => {

        if (props.json != undefined) {
            let l = props.json.lines.map((item => <Line json={item} />))
            setLines(l) // Lines are set.
            setLinesToDisplay(
                renderLinesAsColumns // Next, call renderLinesAsColumns.
            )
        }
       
    }, []
    )

    const renderLinesAsColumns = () => {

        var result = []

        lines.forEach(line => { // ERROR: "lines is undefined". But lines was already set!
            result.push(line) 
        })

        setLinesToDisplay(result) // set lines to display
    }


}

为什么会这样？ 我可以确认在调用renderLinesAsColumns之前已经设置了lines 。

Answer 1

误解是当你打电话时

setLines(l) // Lines are set.

它实际上是

setLines(l) // Lines will be set, the next time we render.

但是由于您在下一次渲染之前调用renderLinesAsColumns ，所以当您调用它时， lines仍然是未定义的。 然后当它再次渲染时，它永远不会使用更新后的值调用renderAsLinesAsColumns 。

你可能想做：

useEffect(() => {
    if (props.json != undefined) {
        let l = props.json.lines.map((item => <Line json={item} />))
        setLines(l) // Lines are set.
    }
}, [])
useEffect(() => {
    if (lines && lines.length) {
        setLinesToDisplay(
            renderLinesAsColumns // Next, call renderLinesAsColumns.
        );
    }
}, [lines])