簡體   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