javascript - 为什么我的 localStorage.setItem 似乎没有做任何事情？

问题描述

我试图将代码简化为相关的内容。

class AnnotatedLayout extends React.Component {
    state = {
        user: '',
        enabled: false,
    };

    render() {
        const { user, enabled } = this.state;
        const contentStatus = enabled ? 'Disable' : 'Enable';
        const textStatus = enabled ? 'enabled' : 'disabled';

        return (
            ...
                            <Form onSubmit={this.handleSubmit}>
                                <FormLayout>
                                    <TextField
                                        value={user}
                                        onChange={this.handleChange('user')}
                                        label="Shop Name"
                                        type="user"
                                        helpText={
                                            <span>
                                                Log in with your store username.
                                            </span>
                                        }
                                    />
                                    <Stack distribution="trailing">
                                        <Button primary submit>
                                            Submit
                                        </Button>
                                    </Stack>
                                </FormLayout>
                            </Form>
                        ...
        );
    }
    handleSubmit = () => {
        this.setState({
            user: this.state.user
        });
        localStorage.setItem('user', JSON.stringify(this.state.user));
        console.log('submission', this.state);
        console.log(this.state.user);
    };
    handleChange = field => {
        return value => this.setState({ [field]: value });
    };
}

export default AnnotatedLayout;

本质上，我的网页有一个表单组件，在提交时，它正在执行 this.handleSubmit，该函数位于底部。

我的代码应该做的是使用键'user'将提交的字符串保存到localStorage，但显然（你可以在console.log输出下面看到）这没有发生。

知道发生了什么吗？

我的网站在本地托管，通过隧道连接到 URL，并用作 shopify 嵌入式应用程序的基本 URL，只是为了提供所有相关上下文。

更新

handleSubmit = () => {
    this.setState({
        user: this.state.user
    },
        () => localStorage.setItem('user', "SMH"),
        console.log(localStorage.getItem('user'))
        );
    console.log('submission', this.state);
};

检查一下，提交我的文本表单后，这就是我得到的

localStorage 是否像本地或其他东西，以至于它不保存函数之外的任何东西？

标签： javascriptreactjslocal-storage

似乎您handleChange返回了一个方法，您需要再次调用该方法来设置用户值。

代替

<TextField
   value={user}
   onChange={this.handleChange('user')}
...

尝试

<TextField
   value={user}
   onChange={e => this.handleChange('user')(e)}
...

valueinhandleChange应该接受事件值，这e是要设置的用户值。

javascript - 为什么我的 localStorage.setItem 似乎没有做任何事情？

问题描述

解决方案

推荐阅读