React中LocalStorage无法保存表单数据，仅存空对象问题排查

问题出在onChangeInput函数的解构赋值逻辑上：

const { name, text } = e.target;

你错误地使用了text属性来获取输入框内容，但HTML输入元素的实际输入值是存储在value属性中的，text并非input元素的标准属性。这导致你给状态赋值的是undefined，values始终保持初始的{ email: "", password: "" }，最终存入localStorage的就是空对象（JSON.stringify处理后显示为{}）。

修正方法 #

把解构中的text替换为value即可：

const onChangeInput = (e) => {
    const { name, value } = e.target;
    setValue(pvalue => ({
        ...pvalue,
        [name]: value,
    }));
};

修正后的完整代码 #

const Signin = () => {

    const [values, setValue] = useState({ email: "", password: "" });

    const onChangeInput = (e) => {
        const { name, value } = e.target;
        setValue(pvalue => ({
            ...pvalue,
            [name]: value,
        }));

    };

    function handleSubmit(e) {
        e.preventDefault()
        localStorage.setItem('items', JSON.stringify(values));
    };


    return (
        <div>
            <form onSubmit={handleSubmit}>
                <p>
                    <label>Email address:</label><br />
                    <input
                        name="email"
                        value={values.email}
                        onChange={onChangeInput}
                    />
                </p>
                <p>
                    <label>Password:</label><br />
                    <input
                        name="password"
                        value={values.password}
                        onChange={onChangeInput}
                    />
                </p>
                <p>
                    <button id="btn" type="submit">Register</button>
                </p>
            </form>
        </div>
    );
}

export default Signin;

修改后，输入框内容会正确同步到values状态，提交表单时就能将完整的用户输入存入localStorage。

内容的提问来源于stack exchange，提问作者Pedram Arabnejad