React: 钩子：useState与useState不更新

您是否要请求功能或报告错误？

似乎是个错误。 😕

目前的行为是什么？

嵌套的上下文提供程序和useContext钩子似乎冲突，更新被丢弃。

预期的行为是什么？

连接到上下文时，只要更改value ，它就会更新。

哪个版本的React，以及哪个浏览器/操作系统受此问题影响？

• react ： 18.8.0-alpha.1 （也复制到16.7.0-alpha.0 ）
• 浏览器： chrome 71
• 操作系统：macOS Sierra

更多细节

在清理localStorage“连接”时，
我尝试将官方的react文档中的2篇文章（ [1]和[2] ）混合在一起，我已经用钩子实现了它，但是价值似乎没有传递。

我在codeandbox [3]上做了一个简化的演示。

实际的实现仅增加了几行（将其解析为JSON并将其字符串化为JSON）。

我发现的解决方法：

• 如果我在setValue函数周围的每个渲染上创建一个新函数，则它实际上可以工作。
  
  
  
  • 但这与[1]关于避免创建新值的建议背道而驰。
  
  
• 将其迁移到类，并使用componentDidUpdate代替useEffect 。
  
  
  
  • 我现在正在实际使用它，因为它可以正常工作。 包括在状态中保存对函数的引用。
  
  

有什么不应该在下面的代码上工作的吗？ 变化会触发效果，
但该值不会在通过钩子消耗的组件上更新。 看到复制代码[3]

const createLocalStorage = key => {
    const initialValue = localStorage.getItem(key)
    const ValueContext = createContext(initialValue)
    const SetterContext = createContext(() => {})

    const useStorage = () => [ValueContext, SetterContext].map(useContext)

    const Provider = ({children}) => {
        const [value, setValue] = useState(initialValue)

        useEffect(
            () => {
                console.log('effect', value)
                localStorage.setItem(key, value)
            },
            [value],
        )

        return (
            <ValueContext.Provider value={value}>
                <SetterContext.Provider value={setValue}>
                    {children}
                </SetterContext.Provider>
            </ValueContext.Provider>
        )
    }

    return [Provider, useStorage]
}

[1] ： https: //reactjs.org/docs/hooks-faq.html#how -to-avoid-passing-callbacks-down
[2] ： https: //reactjs.org/docs/context.html#updating -context-from-a-nested-component
[3] ： https :