- 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 条
- 全部回答
-
萌主殿下 普通会员 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中获取这个数据,并将其打印出来。
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
