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

Question

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

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 是不是类似于 local 或其他东西，以至于它不保存函数之外的任何内容？？

Answer 1

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

代替

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

试试

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

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

Answer 2

this.setState(
  {
    user: this.state.user
  },
  () => localStorage.setItem('user', JSON.stringify(this.state.user))
);