繁体   English   中英

更新属性值 JSON object arrays (React JS)

[英]Updating property values of JSON object arrays (React JS)

我正在尝试将 map 所有“失败的主题及其分数”放入一个数组中,并为每个主题添加一个按钮,这将增加点的值,但仅限于单击的项目。

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 }]
    }
}

主题.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>;
} 

增加值后,应在本地 JSON 文件中更新它们。

无论我尝试什么都行不通,所以请尽可能提供帮助。

此任务无法从前端完成。 您需要一个后端服务器来处理任何“写入文件”任务。 您可以使用Node.js 快递或其他替代方式。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM