javascript - React Context TypeError：BlurChangeValue 不可迭代

Question

我在此示例中使用React Context和使用 React Context 的本地存储我想在另一个组件中获取值，但 getBlurChangeValue是不可迭代的：

SideBarBlurChange.jsx

import React, {useState, createContext} from "react";
import {getTrackBackground, Range} from "react-range";

const STEP = 0.1;
const MIN = 0;
const MAX = 100;

export const BlurContext = createContext([]);

export default function SideBarBlurChange(props) {

    const ls = parseInt(window.localStorage.getItem('values'));
    const [values, SetValues] = useState(ls ? [ls] : [50]);

    const SaveChanges = () => {
        localStorage.setItem('values', values);
    }

    return (
        <>
            <BlurContext.Provider value={{
                BlurChangeValue: [values, SetValues],
            }
            }>
                <div
                    style={{
                        display: "flex",
                        justifyContent: "center",
                        flexWrap: "wrap",
                    }}
                    // More jsx
           </BlurContext.Provider>
        </>
    );
}

边栏.jsx

export default function SideBar(props) {

    const {BlurChangeValue} = React.useContext(BlurContext)
    const [values] = BlurChangeValue;

    return (
        <div className={"headline_sidebar_wrapper"}>
            <article className={`${Blur.glass} ${Blur.up}`}>
                <nav id="sidebar" className="sidebar-wrapper modal">
                    <div style={{backgroundImage: `url(${SideBarBackground})`}}>
                        <div style={{background: SideBarTheme, backdropFilter: `blur(${values})`}}
                             className={`${Blur.SideBar_Page_Content} ${Blur.SideBarContainer}`}>
                        </div>
                    </div>
                </nav>
            </article>
        </div>
    );
}

我想使用valuesJSX 中的值来获得模糊效果，所有其他上下文都可以正常工作，我只是删除了它们以便更容易阅读代码。

标签： javascriptreactjsreduxreact-hooksjsx

Answer 1

我认为这里的主要问题是BlurContext. 改为尝试：

export const BlurContext = createContext({
   BlurChangeValue: [],
});

进一步阅读React.createContext。