React 如何将钩子值传递给 CreateContext

Question

我有一个SideBarBlurChange 组件，我需要在BlurChangeValue 数组内传递一个名为values 的值，该数组位于CreateContext 内。

在网上没有找到合适的例子，希望可以reolize，因为目前我没有其他的reolize选项。我想显示我想要做的事情的屏幕截图，让你更清楚

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

export default function SideBarBlurChange(props) {

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

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

    return (
        <>
            <BlurContext.Provider values={values}>
                // jsx
            </BlurContext.Provider>
        </>
    );
}

Answer 1

很多错误

1. const ls = parseInt(window.localStorage.getItem('values')); 似乎 localStorage.values 是数字，但是 localStorage.setItem('values', values); 设置为数组
2.createContext({ BlurChangeValue: [], });用属性BlurChangeValue创建一个Object上下文，但<BlurContext.Provider value={values}>提供数组值

const [values, setValues] = useState(()=> JSON.parse(localStorage.getItem('values') || '[20]'));
const saveValues = ()=> {
    localStorage.setItem('values', JSON.stringify(newValues));
}
return (
<BlurContext.Provider values={{BlurChangeValue: values}} >
)
;