React中JSON数组数据处理：复选框状态切换功能修复

你的代码存在两个核心问题导致切换功能失效，下面逐一说明并给出修复方案：

错误原因分析 #

• 未使用React状态管理，直接修改静态JSON
  导入的dummy是静态JSON文件，属于只读的静态资源，直接修改它不会触发React组件重新渲染，页面不会更新。而且你写的dummy.state[number].checked !== dummy.state[number].checked;只是做了一次比较运算，根本没有给checked字段重新赋值，属于无效代码。

• 用字符串id作为数组索引，访问元素错误
  你的数据中id是字符串格式（比如"1"），而数组索引是从0开始的数字。用dummy.state[number]访问时，会把字符串id当成索引，导致取到错误的数组元素（比如id为"1"的项对应数组索引0，但你用"1"会取到索引1的元素）。

修复后的完整代码 #

修改App.js，引入React的状态管理，正确处理数据更新：

import "./styles.css";
import { useState } from "react";
import dummy from "./database/data.json";

export default function App() {
  // 将静态JSON数据转为React状态
  const [state, setState] = useState(dummy.state);

  const handleCheck = (targetId) => {
    // 找到目标项，创建新数组更新状态（遵循React不可变性原则）
    setState(prevState => 
      prevState.map(item => 
        item.id === targetId ? { ...item, checked: !item.checked } : item
      )
    );
  };

  return (
    <div className="App">
      {state.map((item, idx) => {
        return (
          <div
            onClick={() => handleCheck(item.id)}
            key={idx}
            style={{ cursor: "pointer", margin: "8px 0" }}
          >
            {item.checked ? "O" : "X"}
          </div>
        );
      })}
    </div>
  );
}

修改说明 #

1. 引入useState管理状态：把静态JSON数据转为组件内部状态，这样数据变化时React会自动重新渲染页面。
2. 正确实现handleCheck函数：使用函数式更新setState，通过map创建新数组，找到对应id的项后切换checked的值，保证状态更新的不可变性。
3. 修正元素访问逻辑：通过id匹配找到对应的数组项，不再用id作为索引，避免访问错误。

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