React 如何将钩子值传递给 CreateContext

Question

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

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

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 创建对象上下文，但 <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}} >
)
;