如何使用myData.map创建的输入字段更新JSON数据

Question

JSON数据用于为数组中的每个项创建动态输入字段。我希望更新JSON数据以匹配所选的数量，但不确定最好的方法是什么？

我计划使用Hooks最初存储所选项目的数量，然后按下按钮更新JSON文件，尽管我对JSON文件更新onChange持开放态度。这方面的最佳实践是什么？可以动态创建react钩子吗？

这是我当前的代码(我希望在JSON文件中更新数量(。

JSON:

//Json data for the shopping ingredients
export default [
{
bread: {
Quantity: 0,
},
Name: 'Bread',
Price: "1.10",
},
{
milk: {
Quantity: 0,
},
Name: 'Milk',
Price: "0.50",
},
{
cheese: {
Quantity: 0,
},
Name: 'Cheese',
Price: "0.90",
},
{
soup: {
Quantity: 0,
},
Name: 'Soup',
Price: "0.60",
},
{
butter: {
Quantity: 0,
},
Name: 'Butter',
Price: "1.20",
}
]

反应：

import React, { useState, useEffect } from "react";
import Data from '../shoppingData/Ingredients';
const ShoppingPageOne = (props) => {
//element displays
const [pageone_show, setPageone_show] = useState("pageOne");
//updates quatity of ingredients
const [bread_quantity, setBread_quantity] = useState(0);
const [milk_quantity, setMilk_quantity] = useState(0);
const [cheese_quantity, setCheese_quantity] = useState(0);
const [soup_quantity, setSoup_quantity] = useState(0);
const [butter_quantity, setButter_quantity] = useState(0);
useEffect(() => {
//sets info text using Json
if (props.showOne) {
setPageone_show("pageOne");
} else {
setPageone_show("pageOne hide");
}
}, [props.showOne]);

return (
<div className={"Shopping_Content " + pageone_show}>
{Data.map((Ingredients) => {
return <div className="Shopping_input" key={Ingredients.Name}>
<p>{Ingredients.Name} £{Ingredients.Price}</p>
<input onChange={} type="number"></input>
</div>
})}
<div className="Shopping_Buttons">
<p onClick={props.next_ClickHandler}>Buy Now!</p>
</div>
</div>
);
};
export default ShoppingPageOne;

从JSON文件动态生成输入字段是很好的，但使用静态挂钩更新JSON似乎很愚蠢。

Answer 1

要使用文件系统，需要有特定的模块。你可以使用NodeJS使用"fs"模块https://nodejs.org/dist/latest-v15.x/docs/api/fs.html.您需要一个单独的端点来负责服务器端的数据更新。