React JS中更新JSON对象数组属性值：点击按钮增加对应挂科科目分数

修复方案 #

1. 原有问题梳理

• 挂科科目提取逻辑错误：原有循环同时遍历了passed和failed两个字段，且索引取值混乱，无法正确提取所有挂科科目
• 缺少加分逻辑：未绑定按钮点击事件，也没有按React不可变原则更新状态
• 缺少JSON同步逻辑：前端无法直接修改本地静态JSON文件，需要配合后端接口（下文以常用的json-server模拟接口为例，如果你用其他后端框架对应修改请求逻辑即可）

2. 完整修改后的代码

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 = [];
  Object.entries(data).forEach(([year, yearData]) => {
    yearData.failed?.forEach((subject, idx) => {
      failedArr.push({
        ...subject,
        year, // 记录所属学年
        subjectIndex: idx // 记录在当前学年failed数组的索引
      })
    })
  })

  // 加分逻辑
  const handleAddPoint = async (year, index) => {
    // 不可变更新状态
    const newData = structuredClone(data);
    newData[year].failed[index].points += 1;
    setData(newData);

    // 同步更新到JSON文件，这里用json-server的接口规则为例
    try {
      await fetch(`http://localhost:3000/${year}`, {
        method: 'PATCH',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          failed: newData[year].failed
        })
      })
    } catch (e) {
      console.error('更新失败', e)
    }
  }

  return <div className="row">
    {failedArr.map(subject => (
      <div key={subject.name}>
        <button onClick={() => handleAddPoint(subject.year, subject.subjectIndex)}>Add point</button>
        <p>{subject.name} - {subject.points}</p>
      </div>
    ))}
  </div>;
} 

3. 注意事项

• 如果你没有用json-server，需要自己写后端接口接收更新后的学年数据，覆盖写入本地JSON文件
• 原JSON里的单词拼写错误（Agrictulture、Litretarue）不影响逻辑，如需修正直接改JSON文件即可

内容的提问来源于stack exchange，提问作者Egon Adelsberger