React开发Todo应用时如何创建Todo对象实例加载JSON文件数据

AI 小北

2026-10-1

问题核心原因

你导入的Todo是React UI渲染组件，不是用来定义todo数据结构的模型类，因此不能用new Todo(参数)的方式创建todo数据对象，你需要的todo数据只是符合格式要求的普通JavaScript对象即可。

具体修改方案

你可以直接用导入的json数据作为状态初始值，不需要额外写loadFromFile函数调用addTodo，修改TodoList组件的代码如下：

删掉你写的错误的loadFromFile变量，以及JSX里的{loadFromFile}代码
修改todos状态的初始化逻辑，直接用json数据生成初始值，同时补充isComplete默认字段：

// 原来的写法
// const [todos, setTodos] = useState([]);
// 修改后的写法
const [todos, setTodos] = useState(data.map(item => ({
  id: item.id,
  text: item.text,
  isComplete: false
})));

可选方案：用addTodo加载初始数据

如果你确实需要通过addTodo函数来添加初始数据，要把逻辑放到useEffect里，避免触发无限重渲染：

import React, { useState, useEffect } from 'react'; // 先导入useEffect

function TodoList() {
  const [todos, setTodos] = useState([]);

  // 组件第一次挂载时加载json数据
  useEffect(() => {
    data.forEach(item => {
      addTodo({
        id: item.id,
        text: item.text,
        isComplete: false
      })
    })
  }, []) // 空依赖数组保证只执行一次

  // 剩下的代码保持不变
}

原代码错误点说明

你写的new Todo(data.id,data.text)完全不符合语法：Todo是函数式组件，只接受props参数，调用后返回的是JSX元素，不是你需要的todo数据对象
直接在组件顶层执行data.map调用addTodo会触发无限重渲染：addTodo内部调用setTodos会触发组件更新，组件更新又会重新执行顶层的data.map逻辑，陷入死循环
JSX里渲染{loadFromFile}是无效的：loadFromFile是map返回的普通对象数组，不是可渲染的JSX节点