describe: Whenever I switch from using localhost as the API endpoint to the actual backend live URL, I get two errors in my React app. Here are the errors I'm getting:
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
I use MongoDB and Node.js as backend. Appreciate any insights or solutions to resolve this issue. Thanks!
Additional details: If any additional information or code snippets are needed to help diagnose the problem, please let me know.
Friend component code:
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;
I ended up adding conditional rendering to the current user's friends functionality patch. The problem occurs when the current user requests itself.