Reactjs 如何从获取本地存储设置状态？

我想将本地存储值设置为我的状态。我的代码如下。 请让我知道。因为根据我的代码，它不会被设置，我想在TextInput值中显示我的状态。 一旦我第一次尝试获取该值，但一旦它重新加载并尝试从ComponentDidMount获取，它的show null

import React, { Component } from 'react';
import TextField from '@material-ui/core/TextField';
import Container from '@material-ui/core/Container';
import Button from '@material-ui/core/Button';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import InputLabel from '@material-ui/core/InputLabel';
import FormControl from '@material-ui/core/FormControl';
import axios from 'axios';
import qs from 'qs';


class CustomerInfo extends Component {

    constructor(props) {
        super(props);
        this.state = { 
            customername:'',
            contactno:'',
            email:'',
            time:'',
            useStyles:''
         }

       }


       changeHandler = (ev) => {
          this.setState({
        [ev.target.name]: ev.target.value
    })
        localStorage.setItem(ev.target.name,ev.target.value);  

     }



    componentDidMount() {
      console.log('component did mount');
      const {customername,contactno,email,time} = this.state;
      const v_customername = localStorage.getItem('customername');
      this.setState({customername,v_customername});

      console.log("customer name state :",this.state.customername);
    }

    render() {
      console.log('state value : ',this.state.customername);

        const {customername , contactno , email , time } = this.state;
      //  const vCustomername = localStorage.getItem('customername');
        return (

            <Container component="div" maxWidth="xs">
            <h2> Customer Info </h2>
            <TextField
                 variant="outlined"
                 margin="normal"
                 required
                 fullWidth
                 id="customername"
                 label="Customer Name"
                 name="customername"
                 autoComplete="customername "
                 autoFocus
                 onChange={this.changeHandler}
                 //value={localStorage.getItem("customername")}
                 value={this.state.customername}
                 />
           <TextField
                 variant="outlined"
                 margin="normal"
                 required
                 fullWidth
                 id="contactno"
                 label="Contact No"
                 name="contactno"
                 autoComplete="contactno"                
                 onChange={this.changeHandler}
                 value={contactno}
                 />

                 <TextField
                 variant="outlined"
                 margin="normal"
                 required
                 fullWidth
                 id="email"
                 label="Email"
                 name="email"
                 autoComplete="email"
                 onChange={this.changeHandler}
                 value={email}
                 />

            <FormControl 
            variant="outlined"
            margin="normal"
            fullWidth           
            >
             <InputLabel  >
               Time to Visit
               </InputLabel>
               <Select
              name ="time"
              value={this.state.time}
              onChange={this.changeHandler}
              labelWidth={400}
                 >
              <MenuItem value="">
              <em>None</em>
              </MenuItem>
              <MenuItem value={'Morning'}>Morning</MenuItem>
               <MenuItem value={'Evening'}>Evening</MenuItem>
               <MenuItem value={'Night'}>Night</MenuItem>
                </Select>
                </FormControl>
                <Button variant="contained" color="primary" onClick={this.postData}>
        Primary
      </Button>
            </Container>
        );
    }
}

export default CustomerInfo;

import React，{Component}来自'React'；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/Container”导入容器；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/Select”导入Select；
从“@material ui/core/MenuItem”导入菜单项；
从“@material ui/core/InputLabel”导入InputLabel；
从“@material ui/core/FormControl”导入FormControl；
从“axios”导入axios；
从“qs”进口qs；
类CustomerInfo扩展组件{
建造师（道具）{
超级（道具）；
this.state={
客户名称：''，
联系人号码：''，
电子邮件：“”，
时间：''，
使用样式：“”
}
}
changeHandler=（ev）=>{
这是我的国家({
[ev.target.name]：ev.target.value
})
setItem（ev.target.name，ev.target.value）；
}
componentDidMount（）{
log（'component do mount'）；
const{customername，contactno，email，time}=this.state；
const v_customername=localStorage.getItem（'customername'）；
this.setState（{customername，v_customername}）；
log（“客户名称状态：”，this.state.customername）；
}
render（）{
log（'状态值：'，this.state.customername）；
const{customername，contactno，email，time}=this.state；
//const vCustomername=localStorage.getItem（'customername'）；
返回(
客户信息
参观时间到了
没有一个
早晨
傍晚
夜
主要的，重要的
);
}
}
导出默认CustomerInfo；

试试这个

  componentDidMount() {
          console.log('component did mount');
          const {customername,contactno,email,time} = this.state;
          const v_customername = localStorage.getItem('customername');
          this.setState({customername : v_customername});

          console.log("customer name state :",this.state.customername);
        }

---

谢谢你的快速回复