[英]Updating property values of JSON object arrays (React JS)
I'm trying to map all the "failed subjects and their points" into one array and add a button for each subject that will increase value of points but only for the item clicked.我正在尝试将 map 所有“失败的主题及其分数”放入一个数组中,并为每个主题添加一个按钮,这将增加点的值,但仅限于单击的项目。
JSON file: JSON 档案:
{
"firstyear": {
"passed": [{ "name": "English", "points": 0 }, { "name": "History", "points": 0 }],
"failed": [{ "name": "Chemistry", "points": 0 }, { "name": "Agrictulture", "points": 0 }]
},
"secondyear": {
"passed": [{ "name": "Medicine", "points": 0 }, { "name": "Arts", "points": 0 }],
"failed": [{ "name": "Gym", "points": 0 }, { "name": "German", "points": 0 }]
},
"thirdyear": {
"passed": [{ "name": "Math", "points": 0 }, { "name": "Informatics", "points": 0 }],
"failed": [{ "name": "French", "points": 0 }, { "name": "Economics", "points": 0 }]
},
"fourthyear": {
"passed": [{ "name": "Litretarue", "points": 0 }, { "name": "Philosophy", "points": 0 }],
"failed": [{ "name": "Politics", "points": 0 }, { "name": "Gardening", "points": 0 }]
}
}
Subjects.js:主题.js:
import {fetchAll} from '../AppFetch';
import {useEffect, useState} from 'react';
export default function Subjects() {
const [data, setData] = useState({});
useEffect(( ) => {
fetchAll("http://localhost:3000/example.json", setData)
}, []);
const failedArr = [];
for(let i=0; i<Object.entries(data).length; i++){
const status = Object.values(data)[i];
for(let j=0; j < Object.keys(status).length; j++){
const failed=Object.entries(status)[j][1]
failedArr.push(failed[j])
}
}
return <div className="row">
{failedArr.map(key => (
<div key={key.name}>
<button>Add point</button>
<p>{key.name} - {key.points}</p>
</div>
))}
</div>;
}
After increasing the values they should be updated in the local JSON file.增加值后,应在本地 JSON 文件中更新它们。
Whatever I try isn't working so please help if you can.无论我尝试什么都行不通,所以请尽可能提供帮助。
This task can not be done from frontend.此任务无法从前端完成。 You need a backend server for handling any "write-to-file" task.您需要一个后端服务器来处理任何“写入文件”任务。 You can use Node.js express or another alternative.您可以使用Node.js 快递或其他替代方式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.