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

【问题标题】：I can’t seem to access my updated state from within this function我似乎无法从这个函数中访问我更新的状态
【发布时间】：2020-04-07 21:08:51
【问题描述】：

我有这个状态：

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

我有一个函数可以遍历一堆数据进行验证。如果有错误，它会将它们添加到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)
            },
        })
        …

有什么建议吗？

【问题讨论】：

标签： javascript reactjs closures react-hooks

【解决方案1】：

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

您的组件函数被多次调用（每次渲染调用一次）。每个调用都会收到一个特定的状态。您可以将其想象为特定状态与特定渲染相关联。如果您在渲染中创建回调，该回调将存在于创建它的渲染的闭包中。问题是，如果您的组件被重新渲染，回调仍然存在于旧渲染的闭包中，并且将看不到新的状态。

解决此问题的一种方法是使用 React.useRef，您可以阅读有关 here 的更多信息。 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() 的组合。

【讨论】：