Question

我写了一个自定义钩子，它维护一个状态并导出该变量，并在组件中使用。在挂钩内，变量从不更新，而在组件内。这是一些简短的代码来演示它。

// useCustomHook.js
export default useCustomHook => {
    const [ quesiton, setQuestion ] = useState("")
    useEffect(() => {
        emitter = new NativeEventEmitter(nativeModule)
        emitter.addListener('eventUpdate', e => {
            setQuestion(e) // e == "testing"
            console.log(question) // question == ""
        })
        emitter.addListener('eventEnd', e => {
            setQuestion(e) // e == "testing"
            finishEvent()
        })
        const finishEvent = () => {
            console.log(question) // question == ""
        }
    }, [])
    return [ question ]
}

// component.js
export default component = props => {
    const [ question ] = useCustomHook()
    return (
        <Text>{question}</Text> // question == "testing"
    )
}

每次更新事件发生时，组件中的问题都会更新。但是在同一个函数中，问题始终是一个空字符串。我无法理解这里发生的事情，一定是我不理解的useState setter的一些奇怪行为。

要对更新事件中的console.log进行一些说明，我不希望它在该调用中输出正确的值。在随后的调用中，值永远不会更新。在触发结束事件之前，将新值发送给更新函数的次数为20至30次。这可能会发生20-30秒。调出的值始终是一个空字符串。

Answer 1

感谢Emile Bergeron和Doug Coburn向我指出了正确的方向。该值将在useEffect中存储，因此不会在函数中更新。这是我使用示例修复的方式。

export default useCustomHook => {
    const [ quesiton, setQuestion ] = useState("")
    emitter = new NativeEventEmitter(nativeModule)
    const eventUpdate = e => {
        setQuestion(e) 
        console.log(question) 
    }
    const eventEnd = e => {
        setQuestion(e) 
        finishEvent()
    }
    const finishEvent = () => {
        console.log(question) 
    }
    useEffect(() => {
        emitter.addListener('eventUpdate', eventUpdate)
        emitter.addListener('eventEnd', eventEnd)
    }, [])
    return [ question ]
}

我很确定自己曾经尝试过，但是我想我以前做错了什么。我将函数声明放在useEffect中，因为我在某处阅读过，这样做更好。因此，如果有人对最佳做法有其他建议，我将很高兴听到他们的建议。

useState变量在组件中是正确的，但在其所在的自定义钩子中不是正确的

1 个答案: