React中如何从JSON文件渲染全部MUI复选框待办项

你现在的问题是没有批量渲染JSON里的待办项，而是手动写了固定的复选框。可以用React的数组map方法遍历todo列表，自动生成对应的MUI组件，同时根据每个todo的completed状态设置复选框默认选中状态，修改后的完整代码如下：

import './App.css';
import React from 'react';
import { Checkbox, FormControlLabel, FormGroup } from '@mui/material';

import data from './todo-list.json';

function App() {
  return (
    <div>
      <header>
        <FormGroup>
          {/* 遍历todos数组，生成每个待办项的复选框 */}
          {data.todos.map(todo => (
            <FormControlLabel
              key={todo.id} // React列表渲染必须的唯一标识，避免渲染警告
              control={
                <Checkbox defaultChecked={todo.completed} />
              }
              label={todo.todo} // 直接使用待办事项内容作为标签
            />
          ))}
        </FormGroup>
      </header>
    </div>
  );
}

export default App;

关键修改说明： #

• 删掉了原代码里仅用于打印的for循环，改用map方法在JSX中直接生成组件列表，这是React处理动态列表的标准方式
• 给每个生成的FormControlLabel添加key={todo.id}，确保React能准确识别每个列表项的变化，避免性能问题和警告
• 将Checkbox的defaultChecked属性绑定到todo.completed，实现根据JSON里的状态自动设置复选框是否选中
• 把固定的label文本替换为todo.todo，直接显示待办事项的实际内容

这样就能自动渲染所有待办项，并且每个复选框的状态都会和JSON里的completed值对应。

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