We Keep Coding

There is a problem with the delete function of the react component implemented through the map method

I am developing using react.
It is in the process of fetching the information contained in the db and displaying it on the web page through the map method.
If you delete one piece of information using onclick or the onClose method provided by antd, the info is also deleted from the db.
in the db, the function worked successfully. but the information at the bottom is deleted, not the deleted information in the web page.
If I refresh website, it is displayed normally, but I don't want to use the window reload function.
I wonder why this is happening and what is the solution.
thank you!
AlertPage
import React, { useState } from "react";
import useSWR from "swr";
import axios from "axios";
import AlertComponent from "./Sections/AlertComponent";
const fetcher = async (url) =>
await axios.get(url).then((response) => JSON.parse(response.data.alerts));
function AlertPage() {
const { data = [], error } = useSWR("/api/streaming/getAlerts", fetcher, {
refreshInterval: 1000,
});
const onClose = (data) => {
axios.post(`/api/streaming/removeAlerts/${data._id.$oid}`).then(() => {
console.log(`${data._id.$oid} deleted`);
});
};
const renderAlerts = data.map((alert, index) => {
return (
<div key={index}>
<AlertComponent alert={alert} index={index} onClose={onClose} />
</div>
);
});
if (error) return <div>failed to load</div>;
if (data === []) return <div>loading...</div>;
return <div>{renderAlerts}</div>;
}
export default AlertPage;
AlertComponent
import React, { useState } from "react";
import { Alert } from "antd";
import Marquee from "react-fast-marquee";
function AlertComponent(props) {
const [alert, setalert] = useState(props.alert);
const [index, setindex] = useState(props.index);
return (
<div
className="alert"
key={index}
style={{ display: "flex" }}
onClick={() => {
props.onClose(alert);
}}
>
<Alert
message={`${alert.data.timestamp.$date.substr(0, 19)}`}
description={
<Marquee pauseOnHover speed={40} gradient={false}>
{`<${alert.data.location}> <${alert.data.name}> <${alert.data.contents}> detected`}
</Marquee>
}
banner
/>
</div>
);
}
export default AlertComponent;

This could be happening due the local cache maintained by swr and since you're not refetching the data after the deletion the changes are not reflected in the DOM.
One options is to trigger a manual refetch to retrieve the most up-to-date data. We could achieve that by changing the following lines:
const { data = [], error, mutate } = useSWR("/api/streaming/getAlerts", fetcher, {
refreshInterval: 1000
});
...
axios.post(`/api/streaming/removeAlerts/${data._id.$oid}`).then(() => {
mutate("/api/streaming/getAlerts");
});
another approach would be to rely on the optimistic update strategy from swr, there is an example here

getting TypeError: movieDetails.map is not a function when try to use useState in useEffect

import { useSelector, useDispatch } from "react-redux";
import { useEffect, useState } from "react";
import request from "../../requests";
import { fetchMovies } from "../../feautures/movies/moviesSlice";
import "./SingleMoviePage.scss";
import Rating from "../../components/UI/Rating/Rating";
import axios from "axios";
const SingleMoviePage = ({ match }) => {
const dispatch = useDispatch();
const [movieDetails, setMovieDetails] = useState({})
/* params */
const movieId = match.params.id;
const page = match.params.page;
const genre = match.params.genre;
/* movies reducer handle */
const movies = useSelector((state) => state.movies.movies);
const moviesStatus = useSelector((state) => state.movies.status);
/* movieDetails reducer handle */
/* base urls */
const baseImgUrl = "https://image.tmdb.org/t/p/original";
const movieDetailUrl = `https://api.themoviedb.org/3/movie/${movieId}?api_key=c057c067b76238e7a64d3ba8de37076e&language=en-US`;
useEffect(() => {
const fetchData = async() => {
let response = await axios.get(movieDetailUrl);
response = response.data;
setMovieDetails(response)
}
fetchData()
},[movieDetailUrl])
console.log("data: ",movieDetails )
let content;
if (moviesStatus === "loading") {
<div>Loading ...</div>;
} else if (moviesStatus === "succeeced") {
let movie = movies.find((movie) => movie.id.toString() === movieId);
content = (
<div
className="single-movie__container"
style={{
backgroundImage: `url(${
movie.backdrop_path
? baseImgUrl + movie.backdrop_path
: baseImgUrl + movie.poster_path
})`,
}}
>
<div className="single-movie__information">
<h1 className="single-movie__title">{movie.title}</h1>
<div className="single-movie__rate">
<Rating
rating={movie.vote_average}
className="single-movie__stars"
/>
<div className="single-movie__average">
{movie.vote_average}(Imdb)
</div>
</div>
<p className="single-movie__overview">{movie.overview}</p>
<p className="single-movie__genres">
<label>Genres</label>
{
movieDetails.genres.map(genre => {
console.log("genre: ",genre)
return(
<div>{genre.name}</div>
)
})
}
</p>
</div>
</div>
);
}
useEffect(() => {
if (genre === "POPULAR") {
dispatch(fetchMovies(request.fetchPopular(page)));
} else if (genre === "NOW PLAYING") {
dispatch(fetchMovies(request.fetchNowPlaying(page)));
} else if (genre === "UP COMING") {
dispatch(fetchMovies(request.fetchUpComing(page)));
}
}, [dispatch, genre, page]);
return <div className="single-movie">{content}</div>;
};
export default SingleMoviePage;
I'm trying to make a movie website with react-redux. The issue is when I try to get movie details using useEffect and try to map that in:
<p className="single-movie__genres">
I get TypeError: Cannot read property 'map' of undefined error and I get empty object (data: {}) using console.log("data: ", movieDetails).
But if I refresh the page everything works well and I get
data:
{
adult: false,
backdrop_path: "/6MKr3KgOLmzOP6MSuZERO41Lpkt.jpg",
...
}
using console.log("data: ", movieDetails). Why can't I get data when the page is first loaded?

It is because your initial state does not contain "genres" array inside the object. And when react tries to handle
movieDetails.genres.map(...)
it fall down because movieDetails.genres is undefined (and undefined does not support map method of course). Either include empty array in you initial state like:
const [movieDetails, setMovieDetails] = useState({genres:[]})
or use "?" operator in your chain like:
movieDetails.genres?.map(...)

.map method is a prototype function for type array. you should declare moviedetails as an array like this when setting the default value using useState hook.
const [movieDetails, setMovieDetails] = useState([])

There is a point that i dont understand.As far as i know when the component is first loaded first useEffect worked and filled my movieDetails with datas after that map func worked.I mean js works top to bottom and
shouldn't movieStatus be filled with data until it comes to the map function?

Why does router.query return an empty object in NextJS on first render?

My url is: http://localhost:3000/company/60050bd166cb770942b1dadd
I want to get the value of the id by using router.query. However when I console log router.query, it returns an empty object first and then return the object with data. This results in bugs in other parts of my code as I need the value of the id to fetch other data.
This is my code:
import { useRouter } from 'next/router';
import styles from './CompanyId.module.css';
import { useQuery } from '#apollo/client';
import { COMPANY_DETAILS } from '../../queries/company';
const CompanyDetails = () => {
const router = useRouter();
console.log(router.query);
const { loading, data } = useQuery(COMPANY_DETAILS, {
variables: { _id: companyId },
});
return (
<div className={styles.container}>
{loading ? <h1>Loading</h1> : <h1>{data.company.name}</h1>}
</div>
);
};
export default CompanyDetails;
My program is crashing right now because the companyId variable is empty on the first render. Is there anyway to go around this problem?

In Next.js:
Pages that are statically optimized by Automatic Static Optimization will be hydrated without their route parameters provided, i.e query will be an empty object ({}).
After hydration, Next.js will trigger an update to your application to provide the route parameters in the query object.

I solved it by using useLazyQuery instead of useQuery, and wrapped the function inside useEffect.
The problem was that NextJS's router.query returns an empty object on the first render and the actual object containing the query comes in at the second render.
This code works:
import React, { useEffect } from 'react';
import { useRouter } from 'next/router';
import styles from './CompanyId.module.css';
import { useLazyQuery } from '#apollo/client';
import { COMPANY_DETAILS } from '../../queries/company';
const CompanyDetails = () => {
const router = useRouter();
const [getCompany, { loading, data }] = useLazyQuery(COMPANY_DETAILS);
useEffect(() => {
if (router.query.companyId) {
getCompany({ variables: { _id: router.query.companyId } });
}
}, [router.query]);
if (loading) return <h1>Loading....</h1>;
return (
<div className={styles.container}>
{data && <h1>{data.company.name}</h1>}
</div>
);
};
export default CompanyDetails;

Empty redux store, useSelector returns nothing

so I've got an really simple react-app. It renders some cars on the first render, when you click details, it takes you to another router and shows only that vehicle based on its ID.
It's all okay when you follow the right order, open up the page, redux gets filled with data, car cards render up, then you click 'details' button, react-router steps in and routes us to some particular car's id, based on the ID we see the car.
BUT... at that point, when you try to click re-render the page, I get nothing from my redux store, what am I need to do? Do I need to inplement in my every component that needs redux store to fetch items if there's not?
This is my slice from redux
import { createSlice, createEntityAdapter, createAsyncThunk } from '#reduxjs/toolkit'
import axios from 'axios'
const carAdapter = createEntityAdapter();
// async action
export const fetchCars = createAsyncThunk('cars', async () =>{
const car = await axios.get('http://localhost:5000/api/cars');
return car.data.data
});
const carSlice = createSlice({
name: 'cars',
initialState: carAdapter.getInitialState({
status: 'idle',
error: null
}),
reducers:{
},
extraReducers :{
[fetchCars.pending]: (state, action) => {
state.status = 'loading'
},
[fetchCars.fulfilled]: (state, action) => {
state.status = 'fulfilled'
carAdapter.setAll(state, action.payload)
},
[fetchCars.rejected]: (state, action) => {
state.status = 'failed'
state.error = action.error.message
}
}
})
export const {
selectAll: selectAllCars,
selectById : selectCarById,
} = carAdapter.getSelectors(state => state.cars)
export default carSlice.reducer
This is my first page, where I render all the vehicles from my api
import React, { useEffect } from 'react'
import { Link } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { fetchCars, selectAllCars } from '../features/car/carSlice'
import './car.css'
export default function Car() {
const dispatch = useDispatch();
const carStatus = useSelector(state => state.cars.status)
const cars = useSelector(selectAllCars)
useEffect(() => {
if(carStatus === 'idle') {
dispatch(fetchCars());
}
}, [dispatch, carStatus])
return (
<>
{
cars.map(car => {
return (
<div key={car.id} className="card">
<img src={car.vehiclePhoto} alt="vehicle" className="vehicle-img" />
<div className="card-container">
<h4>{car.vehicleName}</h4>
<p>{car.price}</p>
<Link to={car.id}>Details</Link>
</div>
</div>
)
})
}
</>
)
}
This is where the issue begins when you try to re-load the page
export default function Car({ match: { params: { id } } }) {
const state = useSelector(state => state)
const car = selectCarById(state, id);
return (
<div className="card">
{ car ?
<>
<img src={car.vehiclePhoto} alt="vehicle" class="vehicle-img" />
<div className="card-container">
<h4>{car.vehicleName}</h4>
<p>{car.price}</p>
</div>
</> : 'loading...'
}
</div>
)
}

Every page of the app needs to be able to load its own data. On a page which displays details for a single car, you want it to look in the state, select the data if it's already loaded, and dispatch a request for the data if it hasn't been loaded (like when you go to that page directly).
You'll want to use a different API endpoint on the single car page than the one that you use on the home page because you want to load a single car's details from the id. It's probably something like 'http://localhost:5000/api/cars/123' for id #123.

Looking at the last image, I think line 9 should be
return selectCarById(state, id)

Rest API response not updating until page is refreshed

I've got component that displays contact information from a dealer as chosen by a user. To be more specific, a user selects their location, setting a cookie which then is used to define the API call. I pull in the contact information of the dealer in that location using Axios, store it in a context, and then display the information as necessary through several components: the header, a "current location" component etc.
The problem that I'm currently running into is that the contact information, as displayed in the Header for example, doesn't update until a user performs a hard refresh of the page, so, assuming the default text of the button is something like "Find A Dealer", once a dealer is selected, the button label should say the name of the dealer the user has selected. At present, it isn't working that way. Below is the code for the Header component, and my ApiContext.
ApiContext.tsx
import React, { createContext } from 'react';
import axios from 'axios';
import { makeUseAxios } from 'axios-hooks';
import { useCookie } from 'hooks/use-cookie';
const contextObject = {} as any;
export const context = createContext(contextObject);
const useAxios = makeUseAxios({
axios: axios.create({ baseURL: process.env.GATSBY_API_ENDPOINT }),
});
export const ApiContext = ({ children }: any) => {
const [cookie] = useCookie('one-day-location', '1');
const [{ data }] = useAxios(`${cookie}`);
const { Provider } = context;
return <Provider value={data}>{children}</Provider>;
};
Header.tsx
import React, { ReactNode, useContext, useEffect, useState } from 'react';
import Logo from 'assets/svg/logo.svg';
import css from 'classnames';
import { Button } from 'components/button/Button';
import { Link } from 'components/link/Link';
import { MenuIcon } from 'components/menu-icon/MenuIcon';
import { context } from 'contexts/ApiContext';
import { NotificationBar } from '../notification-bar/NotificationBar';
import s from './Header.scss';
import { MainNav } from './navigation/MainNav';
interface HeaderProps {
navigationContent: ReactNode;
}
export const Header = ({ navigationContent }: HeaderProps) => {
const [scrolled, setScrolled] = useState(false);
const [open, setOpen] = useState(false);
const data = useContext(context);
const buttonLabel = data ? data.name : 'Find a Dealer';
const buttonLink = data ? `tel:${data.phone}` : '/find-a-dealer';
useEffect(() => {
const handleScroll = () => {
const isScrolled = window.scrollY > 10;
if (isScrolled !== scrolled) {
setScrolled(!scrolled);
}
};
document.addEventListener('scroll', handleScroll, { passive: true });
return () => {
document.removeEventListener('scroll', handleScroll);
};
}, [scrolled]);
return (
<>
<NotificationBar notificationContent={navigationContent} />
<header className={scrolled ? css(s.header, s.header__scrolled) : s.header}>
<nav className={s.header__navigation}>
<ul className={s.header__container}>
<li className={s.header__logo}>
<Link to="/" className={s.header__link}>
<Logo />
</Link>
</li>
<li className={s.header__primary}>
<MainNav navigationItems={navigationContent} />
</li>
<li className={s.header__utility}>
<Button href={buttonLink}>{buttonLabel}</Button>
</li>
<li className={s.header__icon}>
<MenuIcon onClick={() => setOpen(!open)} />
</li>
</ul>
</nav>
</header>
</>
);
};
Here is a screenshot of my console logs, where I'm logging what is returned from data in the ApiContext.
Any suggestions on this would be greatly appreciated, even if it means completely refactoring the way that I'm using this. Thanks!

You are almost there, your ApiContext looks good, it retrieves the information and populates the context, however, what you are missing is a useState to trigger an update to force the re-hydration of your buttons.
What is happening is that your context never updates the data constant. At the first rendering is empty, once your request is done and the context is full but your button is never being updated. Something like this may work for you:
const data = useContext(context);
const [newData, setNewData] = useState(data);
const buttonLabel = newData? newData.name : 'Find a Dealer';
const buttonLink = newData? `tel:${newData.phone}` : '/find-a-dealer';
You may need to adapt the code a bit to fit your requirements, nevertheless, you may keep the idea, which is creating a state with your retrieved data.
You can create a useEffect to control when the data changes and populate the state if you wish:
useEffect(()=>{
setNewData(data)
}, [data])

After a lot of digging, I was able to figure this out myself.
Using the recommendations from Ferran as a base, I decided that it would be best to rehydrate the components displaying the contact info from a state, but as I'm using this context in multiple components, I needed to have the state update globally. I moved away from makeUseAxios, to a traditional axios call. The dealer ID is then stored in the state and used in the call. I also created the changeDealer const, which I can pass through the context, and which updates the state:
ApiContext.tsx
import React, { createContext, useEffect, useState } from 'react';
import axios from 'axios';
const contextObject = {} as any;
export const context = createContext(contextObject);
export const ApiContext = ({ children }: any) => {
const [dealerId, setDealerId] = useState(`1`);
useEffect(() => {
axios.get(`${process.env.GATSBY_API_ENDPOINT}/${dealerId}`).then((res) => setDealerId(res.data));
}, [dealerId]);
const changeDealer = (value: any) => {
setDealerId(value);
};
const { Provider } = context;
return <Provider value={{ data: dealerId, changeDealer: changeDealer }}>{children}</Provider>;
};
Then if, for example, I have a button that updates the dealer info, I import the context to the component and pass changeDealer through the it:
import { context } from 'contexts/ApiContext';
const { changeDealer } = useContext(context);
I can then attach it to a button like so:
<Link to="/" onClick={() => changeDealer(dealer.id)}>
Set Location
</Link>
This updates the state globally, changing the contact information across all the components that display it. I will be storing the data in a localStorage item, allowing the data to persist after a page refresh.