Fehler: „friends.find ist keine Funktion“, wenn ein Live-Server, aber kein Localhost verwendet wird

Question

Beschreibung: Immer wenn ich von der Verwendung von localhost als API-Endpunkt zur eigentlichen Backend-Live-URL wechsle, erhalte ich zwei Fehler in meiner React-App. Hier sind die Fehler, die ich erhalte:

PATCH https://hobby-hunter-api.onrender.com/users/6488a0ab682e930dcd661111/64628638beaa4cc4aecd3a42 404 (Not Found) in Friend.jsx:25

`Uncaught TypeError: friends.find is not a function in Friend.jsx:22

Ich verwende MongoDB und Node.js als Backend. Wir freuen uns über Erkenntnisse oder Lösungen zur Lösung dieses Problems. Danke!

Zusätzliche Details: Wenn zur Diagnose des Problems zusätzliche Informationen oder Codeausschnitte benötigt werden, teilen Sie mir dies bitte mit.

Freund-Komponentencode:

import { PersonAddOutlined, PersonRemoveOutlined } from "@mui/icons-material";
import { Box, IconButton } from "@mui/material";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { setFriends } from "state";

import UserImage from "./UserImage";

const Friend = ({ friendId, name, userPicturePath }) => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { _id } = useSelector((state) => state.user);
  const token = useSelector((state) => state.token);
  const friends = useSelector((state) => state.user.friends);

  const isFriend = friends && friends.find((friend) => friend._id === friendId); // Check if the friend exists

  const patchFriend = async () => {
    const response = await fetch(
      `https://weblinkbackendapi.onrender.com/users/${_id}/${friendId}`,
      {
        method: "PATCH",
        headers: {
          Authorization: `Bearer ${token}`,
          "Content-Type": "application/json",
        },
      }
    );
    const data = await response.json();
    dispatch(setFriends({ friends: data }));
  };

  if (!Array.isArray(friends)) {
    return null; // Return null if friends is not an array
  }

  return (
    <Box className="text-black flex mb-2 bg-zinc-200 justify-between items-center rounded-lg z-10 ease-in duration-500">
      <Box className="flex justify-between items-center gap-1">
        <UserImage image={userPicturePath} />
        <Box
          onClick={() => {
            navigate(`/profile/${friendId}`);
            navigate(0);
          }}
        >
          <h2 className="text-black font-medium hover:text-white cursor-pointer p-2 mr-1">
            {name}
          </h2>
        </Box>
      </Box>
      <IconButton
        onClick={() => patchFriend()}
        sx={{ p: "0.05rem", fontSize: "0.25rem" }}
      >
        {isFriend ? (
          <PersonRemoveOutlined sx={{ color: "grey" }} />
        ) : (
          <PersonAddOutlined sx={{ color: "grey" }} />
        )}
      </IconButton>
    </Box>
  );
};

export default Friend;

Answer 1

我最终为当前用户的好友功能补丁添加了条件渲染。当当前用户请求自己时，问题就发生了。