我似乎无法从这个函数中访问我更新的状态

Question

我有这个状态：

const [fingerprintingIssues, setFingerprintingIssues] = React.useState([])

我有一个函数可以循环遍历一堆数据进行验证。 如果有错误，它会使用setFingerprintingIssues将它们添加到fingerprintingIssues setFingerprintingIssues 。 这很好用。

但是在这个方法（缩写）中，我正在检查方法complete内的fingerprintingIssues问题，它总是返回[] 。 我读过这是一个关于闭包和陈旧状态的问题，但我似乎看不出这在这里适用。

const validateDocument = data => {
    const start = moment()
    try {
        Papa.LocalChunkSize = 10485
        return Papa.parse(data, {
            complete: () => {
                // Log completion only if it’s been 20 seconds or more
                const end = moment()
                const duration = moment.duration(end.diff(start))
                const seconds = Math.ceil(duration.asSeconds())
                if (seconds < MIN_PROCESS_TIME) {
                    setTimeout(() => {
                        setUploadStep('tagging')
                        console.log('fingerprintingIssues', fingerprintingIssues)
                    }, (MIN_PROCESS_TIME - seconds) * 1000)
                } else {
                    setUploadStep('tagging')
                }
            },
            error: () => {
                setDocumentError(true)
                setDocumentReady(false)
            },
        })
        …

有什么建议？

Answer 1

我认为这确实是关闭和陈旧状态的问题。 使用钩子时，需要谨慎使用回调。

您的组件函数被多次调用（每次渲染调用一次）。 每个调用都会收到一个特定的状态。 您可以将其视为特定状态与特定渲染相关联。 如果您在渲染中创建回调，则该回调将存在于创建它的渲染的闭包内。看不到新状态。

解决此问题的一种方法是使用 React.useRef，您可以在此处阅读更多相关信息。 Refs 持有一个值，可以随时修改和访问，而不管是否关闭。 请注意，修改 ref 不会导致您的组件重新渲染。

const fingerPrintingIssues = React.useRef([])
const validateDocument = data => {
    // Perform validation
    // Now access (refs are accessed by .current)
    console.log(fingerPrintingIssues.current)
}

// Modify:
fingerPrintingIssues.current.push(...)

如果在修改值时需要重新渲染组件，可以使用 useRef() 和 useState() 的组合。