axios 导航到编辑路由时出现React路由器无限加载问题,卡组件未显示在我的EditTodo页面中

35g0bw71  于 2023-10-18  发布在  iOS
关注(0)|答案(4)|浏览(138)

我正在开发一个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;

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

euoag5mw

euoag5mw1#

编辑:检查服务器的响应,它可能不是正确的格式。例如,Res.Data.Todo可能没有Todo键。这会导致状态为null,并且在它为null时显示正在加载的组件。使用正确的格式更改todo键应该可以解决这个问题。

0pizxfdo

0pizxfdo2#

我想,你是在updateCard组件中使用todoId,而没有将它传递给它。

function UpdateCard({todo}) {}

但是你在函数中使用它。

function UpdateCard({todo}) {...

你可以检查handleDelete函数吗?你最好把它 Package 在try-catch块中,并且在代码中尝试对请求使用超时。

jvidinwx

jvidinwx3#

你能检查handleDelete功能吗?你最好把它 Package 在try-catch块中,并且在代码中尝试对请求使用超时。

pzfprimi

pzfprimi4#

您面临React Router的问题,其中Card component未在EditTodo页面上正确显示。要解决此问题,您应该:
1.验证你的路由,包括EditTodo路由,是否在你的React应用程序中正确设置。
1.确保在EditTodo组件中正确呈现了Card组件。
1.检查是否使用React Router的useParams钩子或match.params正确提取路由参数(例如ID)。
1.仔细检查EditTodo组件中的数据获取过程,以确保它按预期运行。
1.查看浏览器的控制台,以获取可能提供有关此问题线索的错误消息或警告。
1.检查CSS和样式,确保Card组件不会由于样式冲突而隐藏。

相关问题