React问题：POST更新用户后返回Home组件出现data.map不是函数错误

在UpdateUser组件成功更新用户后，导航回Home组件时会抛出「Uncaught TypeError: data.map is not a function」错误；但导航至其他组件再返回Home时不会出现该问题，仅在更新用户后触发。

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>
  );
};

问题原因与解决方案 #

核心原因 #

两个组件使用了完全相同的Query Key ["user"]：

• Home组件用该Key获取的是用户列表（数组类型）
• UpdateUser组件用该Key获取的是单个用户对象（对象类型）

React Query会缓存Query Key对应的请求结果，当从UpdateUser导航回Home时，缓存中["user"]对应的是单个用户对象而非数组，执行data.map时自然报错。

解决步骤 #

1. 修改Query Key，区分列表与单个用户请求

   • Home组件的Query Key改为["users"]（用复数明确标识是用户列表）
   • UpdateUser组件的Query Key改为["user", params.userid]（带上用户ID，区分不同用户的请求）

2. 更新Home组件的useQuery代码

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

3. 更新UpdateUser组件的useQuery代码

   const { data } = useQuery(["user", params.userid], () => {
     return axios.get(`/api/getuser/${params.userid}`).then((response) => {
       setName(response.data.name);
       setEmail(response.data.email);
       setUserId(response.data.userid);
       return response.data;
     });
   });
   

4. 可选优化：等待更新完成后再导航
   在UpdateUser的提交函数中，确保更新请求完成后再跳转回Home，避免因数据未同步导致的问题：

   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("/");
     });
   };
   

内容的提问来源于stack exchange，提问作者Urias.Desarrollo