从对象值的localstorage数组中获取输入值

Question

我有一个带有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"(将更改后的值保存到本地存储中？

Answer 1

您可以映射您的状态数据，通过使用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