每当我在UpdateUser组件中成功更新用户并导航回我的主页组件时，我都会收到**“Uncatched TypeError：data.map不是函数”**...当我导航到其他组件并返回主页时，这种情况没有发生;只有在更新任何用户后才会发生。视频：
https://youtu.be/uUf9Yx91-jw
Home.js组件：

import axios from "axios";
import { useQuery } from "@tanstack/react-query";
import uniqid from "uniqid";
import { useNavigate } from "react-router-dom";

export const Home = () => {
  const navigate = useNavigate();
  const { data, refetch } = useQuery(["user"], async () => {
    try {
      return await axios.get("/api/home").then((res) => res.data);
    } catch (error) {
      console.log(error);
    }
  });

  const DisplayUser = () => {
    return (
      <div>
        {data &&
          data.map((user) => {
            return (
              <div className="userCard" key={uniqid()}>
                <h2>Name: {user.name}</h2>
                <p>Email: {user.email}</p>
                <p>Id: {user.userid}</p>
                <button className="btn" onClick={() => deleteUser(user.userid)}>
                  Delete
                </button>

                <button
                  className="btn"
                  onClick={() => {
                    navigate(`/updateuser/${user.userid}`);
                  }}
                >
                  Update
                </button>
              </div>
            );
          })}
      </div>
    );
  };

  const deleteUser = (id) => {
    axios.delete("/api/deleteuser", { data: { id: id } }).then((res) => {
      refetch();
    });
  };

  return (
    <div className="userCardContainer">
      <h1>Home Page</h1>
      <DisplayUser />
    </div>
  );
};

UpdateUser.js

import axios from "axios";
import { useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";

export const UpdateUser = () => {
  const navigate = useNavigate();
  const params = useParams();
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [userid, setUserId] = useState("");

  const { data } = useQuery(["user"], () => {
    return axios.get(`/api/getuser/${params.userid}`).then((response) => {
      setName(response.data.name);
      setEmail(response.data.email);
      setUserId(response.data.userid);
      return response.data;
    });
  });
  const onSubmit = (e) => {
    e.preventDefault();
    const user = {
      name: name,
      email: email,
      password: password,
      userid: userid,
    };
    axios.post("/api/updateuser", user).then((res) => console.log(res));
    navigate("/");
  };

  return (
    <div className="formContainer">
      <h1>{params.userid}</h1>
      <form className="addUserForm" onSubmit={onSubmit}>
        <input
          className="formInput"
          type="text"
          onChange={(e) => setName(e.target.value)}
          value={name || ""}
        />
        <input
          className="formInput"
          type="text"
          value={email || ""}
          onChange={(e) => setEmail(e.target.value)}
        />
        <input
          className="formInput"
          type="password"
          placeholder="Type new password"
          onChange={(e) => setPassword(e.target.value)}
        />
        <input className="formInputBtn" type="submit"></input>
      </form>
    </div>
  );
};

我原以为问题出在UpdateUser组件上，但当我重新加载Home组件时，我看到了更新的用户，所以我认为这一定与useQuery/axios GET请求有关...我已经花了几个小时试图在没有任何帮助的情况下解决这个问题！