如何编辑本地存储值反应？
Posted
技术标签:
【中文标题】如何编辑本地存储值反应？【英文标题】：How to edit local storage values react? 【发布时间】：2019-07-15 18:47:46 【问题描述】：我有两个组件 Display.jsx 和 DisplayList.jsx。组件协同工作以显示来自本地存储的值。问题在于 DisplayList.JSX handleEdit() 方法切片。
Github project
我的想法：
我在这个论坛上问了如何删除本地存储值，得到了这个答案，没有解释：stack overflow question
data = [
...data.slice(0, index),
...data.slice(index + 1)
];
它可以工作，但现在我需要进行类似的切片来编辑旧存储值并将其替换为新存储值。但我不知道该怎么做。
总结：在 DisplayList.jsx 中，handleEdit() 方法需要从本地存储中获取值，并用 this.state 电子邮件和 this.state 密码值覆盖。如果有人可以解释该过程，将获得奖励。
显示.jsx
import React, Component from 'react'
import DisplayList from './DisplayList';
class Display extends Component
constructor(props)
let data = JSON.parse(localStorage.getItem('data'));
super(props)
this.state =
data: data,
// Methods
this.displayValues = this.displayValues.bind(this);
displayValues()
return this.state.data.map((data1, index) =>
<DisplayList
key = index
email = data1.email
password = data1.password
updateList = this.updateList
/>
)
// This is the method that will be called from the child component.
updateList = (data) =>
this.setState(
data
);
render()
return (
<ul className="list-group">
this.displayValues()
</ul>
)
export default Display;
DisplayList.jsx
import React, Component from 'react'
import Button, Modal, Form from 'react-bootstrap';
export class DisplayList extends Component
constructor(props)
super(props)
this.state =
email: '',
password: '',
show: false,
;
// Methods
this.handleDelete = this.handleDelete.bind(this);
this.onChange = this.onChange.bind(this);
// Edit Modal
this.handleShow = this.handleShow.bind(this);
this.handleClose = this.handleClose.bind(this);
this.handleEdit = this.handleEdit.bind(this);
onChange(event)
this.setState(
[event.target.name]: event.target.value
)
;
handleClose()
this.setState(show: false);
handleShow()
this.setState(show: true);
handleEdit(event)
event.preventDefault();
this.setState(show: false);
let data = JSON.parse(localStorage.getItem('data'));
for (let index = 0; index < data.length; index++)
if( this.props.email === data[index].email &&
this.props.password === data[index].password)
localStorage.setItem('data', JSON.stringify(data));
this.props.updateList(data);
handleDelete()
let data = JSON.parse(localStorage.getItem('data'));
for (let index = 0; index < data.length; index++)
if(this.props.email === data[index].email &&
this.props.password === data[index].password)
data = [
...data.slice(0, index),
...data.slice(index + 1)
];
localStorage.setItem('data', JSON.stringify(data));
this.props.updateList(data);
render()
return (
<div className = "mt-4">
<li className="list-group-item text-justify">
Email: this.props.email
<br />
Password: this.props.password
<br />
<Button onClick = this.handleShow variant = "info mr-4 mt-1">Edit</Button>
<Button onClick = this.handleDelete variant = "danger mt-1">Delete</Button>
</li>
<Modal show=this.state.show onHide=this.handleClose>
<Modal.Header closeButton>
<Modal.Title>Edit Form</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control
autoComplete="email" required
name = "email"
type="email"
placeholder="Enter email"
value = this.state.email
onChange = event => this.onChange(event)
/>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control
autoComplete="email" required
name = "password"
type="password"
placeholder="Password"
value = this.state.password
onChange = event => this.onChange(event)
/>
</Form.Group>
</Form>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick=this.handleClose>
Close
</Button>
<Button variant="primary" onClick=this.handleEdit>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</div>
)
【问题讨论】：
没有“编辑”localStorage...您可以简单地用另一个覆盖您设置的现有值...有关本地存储的更多信息：developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
是的，我知道我无法编辑本地存储。我打算使用切片值。同样，我是如何使用 handleDelete() 的。我只是不知道怎么做。我期望的答案是在 handleEdit() if 语句中。它应该看起来接近我的 handleDelete() data = [ ...data.slice(0, index), ...data.slice(index + 1) ];回答
这里的主要问题是在没有首先了解它所基于的语言（javascript）的基础知识的情况下跳入库或框架......这就像在没有先学习的情况下尝试写小说字母表和把基本句子放在一起......我诚实的建议是先学习语言......
@SakoBu 我不同意。我已经编程了 10 个月，我最大的 javascript 个人项目是 Budgety github.com/ArnasDickus/Budgety。使用面向对象的 mvc 模式创建的预算应用程序应用程序。我不认为说我不了解 JavaScript 基础知识是准确的，因为我询问了 rest 参数和切片数据。我很好奇你所说的“先学习语言”是什么意思？在开始做出反应之前，您是否有一份我应该知道的 JavaScript 功能清单？感谢您的回答。
【参考方案1】：
在localStorage中编辑数据时，首先从localStorage中获取值，如果存在则搜索该值的索引，然后更新该索引处的值。
您可以通过多种方式做到这一点，但我发现通过列表进行映射是实现这一目标的最简单方法
handleEdit(event)
event.preventDefault();
this.setState(show: false);
let data = JSON.parse(localStorage.getItem('data'));
data = data.map((value) =>
// check if this is the value to be edited
if (value.email === this.props.email && value.password = this.props.password)
// return the updated value
return
...value,
email: this.state.email,
password: this.state.password
// otherwise return the original value without editing
return value;
)
localStorage.setItem('data', JSON.stringify(data));
this.props.updateList(data);
要理解上面的代码，你需要知道... 做了什么。概括地说，它被称为Spread syntax，它允许在需要零个或多个参数（用于函数调用）或元素（用于数组文字）或对象表达式的地方扩展可迭代对象，例如数组表达式或字符串在需要零个或多个键值对（对于对象文字）的地方进行扩展。您也可以阅读这篇文章以了解更多信息
What does three dots do in ReactJS
现在来看看代码
...value, // spread the original value object
email: this.state.email, // override email value from value object with state.email
password: this.state.password // override password value from value object with state.password
【讨论】：
由于某种原因返回不会覆盖原始值。其他一切都很好。 github project 更新了答案，基本上需要把map返回的值赋值给something。把代码改成data = data.map((value) => 以上是关于如何编辑本地存储值反应？的主要内容，如果未能解决你的问题，请参考以下文章