reactjs 如何在Next.js中的sessionStorage中存储状态

mccptt67 于 2023-05-17 发布在 React

关注(0)|答案(1)|浏览(179)

我正在Next.js中创建一个应用程序，人们可以设置他们的年龄，性别，以及他们是否怀孕，以便将健康相关信息发送回给他们。我想将它们输入的值存储到会话存储中，并在多个不同的页面中使用该状态。我遇到的问题是，在页面重新加载时，会话存储中的值被重置回默认状态。

import { useEffect, useState } from "react";

export function humanStuff() {
    const [human, setHuman] = useState({ sex: 'Male', age: '19-50 years', pregnant: 'No' });

    useEffect(() => {
        const storedState = sessionStorage.getItem('human');
        if (storedState) {
            setHuman(JSON.parse(storedState));
        }
    }, []);

    const handleChange = e => {
        const { name, value } = e.target;
        setHuman(prevHuman => ({ ...prevHuman, [name]: value }));
    };

    );
    useEffect(() => {
        sessionStorage.setItem('human', JSON.stringify(human));
    }, [human]);

    return { human, handleChange, setHuman };
}

我把它导入并这样调用：

const { human, handleChange, setHuman } = humanStuff()

除了会话存储中的值在重新加载时重置为默认值之外，所有内容当前都正常工作。我在想，如果会话存储存在的话，我需要一些方法来设置对会话存储的原始useState调用，但是我找不到任何方法来做到这一点，因为为了进行会话存储，useEffect是必需的。

reactjs

来源：https://stackoverflow.com/questions/76245680/how-to-store-a-state-in-sessionstorage-in-next-js

1条答案

按热度按时间

abithluo1#

import { useEffect, useState } from "react";

export function humanStuff() {
    const [human, setHuman] = useState({ sex: 'Male', age: '19-50 years', pregnant: 'No' });
    const [first, setFirst] = useState(false);

    useEffect(() => {
        const storedState = sessionStorage.getItem('human');
        if (storedState) {
            setHuman(JSON.parse(storedState));
        };
        setFirst(true)
    }, []);

    const handleChange = e => {
        const { name, value } = e.target;
        setHuman(prevHuman => ({ ...prevHuman, [name]: value }));
    };

    );
    useEffect(() => {
        if(first) {
          sessionStorage.setItem('human', JSON.stringify(human));
       }
    }, [human])}

    return { human, handleChange, setHuman };
}

可能有更好的方法，但这是功能性的。我已经设置了它，以便第二个useEffect在第一个useEffect完成之前不会运行。刷新时，默认状态值 Flink 一秒钟，但随后立即更改为存储在会话存储中的状态。如果正常遍历页面而不刷新，则组件将始终保持会话存储状态。

赞(0）回复(0）举报 2023-05-17

我来回答

reactjs 如何在Next.js中的sessionStorage中存储状态

1条答案

相关问题

热门标签

最新问答