reactjs - 我如何从获取本地存储中设置状态我做出反应？

Question

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

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;

标签： reactjs

Answer 1

尝试这个...

  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);
        }