javascript - 从对象值的本地存储数组中获取输入值
问题描述
我有一个带有cartproductx
键的本地存储,其中包含对象数组
[
{"id":"001",
"productName":"Tesla",
"categories":"car",
"price":1000000,
"quantity": 1
},
{
"id":"002",
"productName":"Honda",
"categories":"motorcycle",
"price":10000,
"quantity": 2
},
{
"id":"003",
"productName":"BMW",
"categories":"car",
"price":1200000,
"quantity": 1
}
]
然后我制作函数以从中获取值cartproductx[index].productName
并设置为输入值
import React, { useState } from 'react';
const carts = JSON.parse(localStorage.getItem("cartProductx"));
const GetData = () => {
const [data, setData] = useState(carts);
return (
<div>
<input
type="text"
placeholder=" product"
value={data[0].productName} //Tesla
onChange={e => setName(e.target.value)}
/>
<input
type="text"
placeholder="product"
value={data[1].productName} //Honda
onChange={e => setName(e.target.value)}
/>
<input
type="text"
placeholder="product"
value={data[2].productName} //BMW
onChange={e => setName(e.target.value)}
/>
</div>
)
}
问题是如何在没有硬编码的情况下一一重复输入表单和设置值?以及如何使用相同的键(“cartproductx”)将更改的值保存到本地存储中?
解决方案
您可以映射您的状态数据,并id
使用您的handleChange
函数进行更改。
const carts = [
{
"id": "001",
"productName": "Tesla",
"categories": "car",
"price": 1000000,
"quantity": 1
},
{
"id": "002",
"productName": "Honda",
"categories": "motorcycle",
"price": 10000,
"quantity": 2
},
{
"id": "003",
"productName": "BMW",
"categories": "car",
"price": 1200000,
"quantity": 1
}
];
function App() {
const [data, setData] = React.useState(carts);
function handleChange(e, id) {
const { value } = e.target;
setData((prev) =>
prev.map((item) => {
if (item.id !== id) {
return item;
}
return { ...item, productName: value };
})
);
}
return (
<div>
{data.map((item) => (
<input
key={item.id}
type="text"
placeholder="product"
value={item.productName}
onChange={(e) => handleChange(e, item.id)}
/>
))}
{data.map((item) => (
<div key={item.id}>{item.productName}</div>
))}
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById("root")
);
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root" />
另外,如果您想让更改持久化,我建议您使用useEffect
读取数据localStorage
并再次设置它。useEffect
function App() {
const [data, setData] = React.useState([]);
React.useEffect(() => {
const carts = JSON.parse(localStorage.getItem("cartProductx")) || [];
setData(carts);
}, [])
React.useEffect(() => {
localStorage.setItem("cartProductx", JSON.stringify(data));
}, [data]);
// rest of the code
推荐阅读
- rust - 如何在 Rust 中为 Criterion 基准创建随机输入
- https - 跳过引导程序,因为在使用 certbot-auto 时,此系统上不推荐使用 certbot-auto
- c# - ASP.NET MVC - 是否可以在多个身份验证系统之间进行选择
- java - 在 Spring 中,为什么具有范围原型的服务会多次实例化?
- sql - Oracle sql - 连接不起作用
- google-sheets - 为什么 =IF(10.1-10=0.1,TRUE) 在 Google 表格中返回 F?
- c# - 在类的 ObservableCollection 的绑定元素中插入
- python - OperationalError: ('08S01', '[08S01] [Microsoft][ODBC Driver 17 for SQL Server]通信链路故障 (0) (SQLExecute)')
- python - 如何将其转换为在多进程中工作?
- c# - 避免反应模型中的竞争条件故障