我正在开发一个React Todo应用程序，我使用React-Router在不同的路由之间导航。我遇到了一个问题，我正在努力解决。

**问题：**当我导航到编辑路由"/todos/:id"时，页面无限加载，不显示预期的内容。初始数据获取似乎工作正常，但UpdateCard组件的呈现导致了问题。
**预期行为：**点击“编辑”按钮后，我希望被带到编辑路由"/todos/:id"，并看到类似于AddTodo组件的卡组件。这张卡片应该允许我更新待办事项的标题和描述。我已经实现了我的后端，它具有删除，添加和更新的逻辑。
**当前行为：**页面没有显示预期的卡片组件，而是陷入无限加载循环。
我采取的步骤：

• 我已经确认了使用Axios的初始数据获取工作正常。
• EditTodo组件使用useParams钩子获取特定todo的数据。
• 我已经检查了控制台的任何错误消息，但没有显示任何错误。
  **代码：**以下是相关代码的简化版本：

App.jsx

import React, { useEffect, useState } from "react";
import { Routes, Route } from 'react-router-dom';
import './App.css'
import TodoList from "./TodoList";
import axios from "axios";
import AddTodo from "./AddTodo";
import EditTodo from "./EditTodo";
import 'tachyons';

// hook
function App() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    fetch("http://localhost:3000/todos", {
      method: "GET"
    })
      .then((response) => response.json())
      .then((data) => setTodos(data))

    setInterval(() => {
      fetch("http://localhost:3000/todos", {
        method: "GET"
      })
        .then((response) => {
          response.json().then((data) => {
            setTodos(data);
          })
        });
    }, 10000)
  }, []);

  const handleDelete = async(todoId) => {
    await axios.delete(`http://localhost:3000/todos/${todoId}`);
    const response = await axios.get("http://localhost:3000/todos");
    const data = response.data;
    setTodos(data);
  };

  return (
    <div>
      <div className="tc">
        <h1>TodoRobots </h1>
      </div>

      <Routes>
        <Route
          path="/todos"
          element={
            <>
              <div>
                <AddTodo />
              </div>
              <div>
                <TodoList todos={todos} onDelete={handleDelete} />
              </div>
            </>
          }
        />
        <Route
          path="/todos/:todosId"
          element={<EditTodo todos={todos} setTodos={setTodos} />}
        />
      </Routes>
    </div>
  );
}

export default App;

EditTodo.jsx

import { Button, Card, CardActions, CircularProgress, TextField } from "@mui/material";
import axios from "axios";
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

function EditTodo() {
  let {todosId} = useParams();
  const [todo, setTodo] = useState("");
    
  useEffect(() => {
    axios.get(`http://localhost:3000/todos/${todosId}`, {
      method: "GET",
    })
      .then(res => {
        console.log("Todo response:", res.data);
        setTodo(res.data.todo)
      })
  }, []);

  if (!todo) {
    return <div style={{display: "flex", justifyContent: "center"}}>
      <CircularProgress />
    </div>
  }

  return <div className="tc">
    <UpdateCard todo={todo} todosId={todosId} />
  </div>
}

function UpdateCard({ todo, todosId }) {
  const [title, setTitle] = useState(todo.title);
  const [description, setDescription] = useState(todo.description);

  return <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", alignItems: "center" }}>
    <div className='tc br3 ma2 grow bw2 shadow-5'>
      <Card style={{ width: 300,  minHeight: 200, padding: 8 , backgroundColor:"#9eebcf"}}>
        <div>
          <TextField
            onChange={(e) => {
              setTitle(e.target.value);
            }}
            label="Title"
            variant="outlined"
            fullWidth
            style={{ marginTop: 16 }}
          /> 

          <TextField
            onChange={(e) => {
              setDescription(e.target.value);
            }}
            label="Description"
            variant="outlined"
            fullWidth
            style={{ marginTop: 16 }}
          />
                
          <CardActions style={{ display: "flex", justifyContent: "center", marginTop: 20 }}>
            <Button
              variant="contained"
              size="large"
              onClick={async () => {
                await axios.put(`http://localhost:3000/todos/${todosId}`, {
                  title: title,
                  description: description
                });
                alert("Todo updated successfully");
              }}>
                Update Todo
              </Button>
            </CardActions>
          </div>     
        </Card>
      </div>
    </div>
}

export default EditTodo;

我将感谢任何关于如何解决这个问题的指导。为什么当我导航到编辑路径时页面会无限加载，我如何修复它？有什么我遗漏的或任何调试建议吗？