账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    react中用localStorage存储的信息怎么通过单条语句查询到列表信息
    36
    0

    用循环遍历渲染出了登陆用户的信息,怎么通过单条数据查询用户整体信息.

    import React from 'react';
    import { Segment, Input, Button } from 'semantic-ui-react'
    import moment from "moment/moment";

    export default class View extends React.Component {
    constructor() { //构造函数
    super();
    this.state = {

    }
    this.userChange = this.userChange.bind(this);
    this.passwordChange = this.passwordChange.bind(this);
    this.submit = this.submit.bind(this);
    }

    userChange(e){
    this.setState({ user : e.target.value })
    }

    passwordChange(e){
    this.setState({ password : e.target.value })
    }

    submit(){

    if(window.localStorage.send){
        var arr = JSON.parse(window.localStorage.send);
    }else{
        arr = [];
    }
    let time = moment().format('YYYY-MM-DD HH:MM:SS');
    
    if(this.state.user==='1234'&&this.state.password==='1234'){
        window.alert('登陆成功');
        let text = {user:this.state.user,password:this.state.password,time:time,state:'登陆成功'};
        arr.push(text);
        window.localStorage.send = JSON.stringify(arr);
        this.props.history.push('/Page')
    }else{
        window.alert('登陆失败');
        let text = {user:this.state.user,password:this.state.password,time:time,state:'登陆失败'};
        arr.push(text);
        window.localStorage.send = JSON.stringify(arr);
    
    }

    // localStorage.clear();
    }

    render(){
    return(
    <div style={{margin:'10px'}}>
    <Segment style={{textAlign:'center'}}>
    <h2>请登录</h2>
    <Input
    id='user'
    placeholder='用户名'
    style={{marginBottom:'10px'}}
    onChange={this.userChange}
    /><br/>
    <Input
    id='password'
    type='password'
    placeholder='密码'
    style={{marginBottom:'10px'}}
    onChange={this.passwordChange}
    /><br/>
    <Button
    primary
    content='登录'
    style={{marginBottom:'10px'}}
    onClick={this.submit}
    />
    </Segment>
    </div>
    )
    }
    }

    import React from 'react';
    import { Segment, Input, Button } from 'semantic-ui-react'

    class Page extends React.Component{

    constructor(){
        super();
        this.state = {
        }
    }
    

    render(){

        let send1 = window.localStorage.getItem("send");
        send1 = JSON.parse(send1);
        console.log(send1);
    
        return(
            <div>{send1.map(item=><div key={item.user}>
            <ul >
            <li>user:{item.user}</li>
            <li>password:{item.password}</li>
            <li>time:{item.time}</li>
            <li>state:{item.state}</li>
            </ul>
            </div>)}
            </div>

    )

    }

    }

    export default Page;

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 萌主殿下 普通会员 1楼

      在React中,你可以通过以下代码通过单条语句查询到列表信息:

      ```jsx import React, { useEffect } from 'react';

      function List() { useEffect(() => { // 这里是你想要查询的数据 const list = ['item1', 'item2', 'item3']; localStorage.setItem('list', JSON.stringify(list)); }, []);

      useEffect(() => { // 这里是你想要从localStorage获取的数据 const list = localStorage.getItem('list'); console.log(list); }, []);

      return (

        {list.map((item) => (
      • {item}
      • ))}
      ); }

      export default List; ```

      在这个例子中,我们首先在useEffect钩子中设置了要查询的数据。然后,我们使用localStorage.setItem方法将这个数据存储到localStorage中。最后,我们使用localStorage.getItem方法从localStorage中获取这个数据,并将其打印出来。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部