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;

看看这个，在提交我的文本表单之后，这就是我得到的

---

localStorage是否与local或其他类似，以至于它不会保存函数之外的任何内容？？？

看起来您

handleChange

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

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

而不是

---

this.setState（{user:this.state.user}）
。。。什么，为什么？您是否尝试过从
localStorage.setItem（“user”，JSON.stringify（this.state.user））
中删除
JSON.stringify
？这已经是一个字符串…我现在正在遵循一个教程，这就是他们所拥有的@user633183你能为'this.handleChange'发布代码吗？@JackBashford，我也试过了，因为它不起作用，我用JSON.stringify试过了，但我只是在没有stringify的情况下运行了它，结果是一样的，null:/它不是
e.target.value
还是什么？我猜这取决于
TextField
的
onChange
返回的内容。另一方面，OP注销了
this.state.user
，所以
handleChange
必须工作？好的，我明白你的意思，文本字段的更改应该已经足够了，我已经尝试过了，但没有成功：/@putvande是的。需要将
e.target.value
转换为
user
对象。但是代码似乎没有那个步骤@ark0n我将稍后关闭此问题，以防您稍后需要它。我尝试了这个方法，但getItem仍然返回null，包括和不包括json.stringifyfwiw@ark0n这是对的。您似乎不了解React组件中的状态是如何工作的。首先，您只是将
user
的状态设置回其当前状态，因此不会有任何更改。更重要的是，
setState
不会立即更改组件上的
此.state
。它会触发一个新的渲染周期，因此更新后的状态将在
componentWillUpdate
中可用（注意，这很快就会被弃用）。但是，您可以添加额外的回调函数，该函数总是在状态更新后执行。
this.setState(
  {
    user: this.state.user
  },
  () => localStorage.setItem('user', JSON.stringify(this.state.user))
);