i have a website with api to get movies,i have a user in my web and this user can like a movie and get him into his favorite. then he have a commponent that call favorite and i want to do there a get request from my data base and bring him the title of my movie.after he get the title i do in my useeffect an api request to get the poster and all the details of the movie and then i wanna to show it in my favorite useing map function.
but i have a problem
my map dosent work or if it work he dosent bring the data from the api
this is the favorite componnent
import { getAllFavorite } from "../../service/favServics";
import { useState, useEffect } from "react";
import PageHeader from "../common/pageHeader";
import FavoriteChiled from "./favoritechild";
function Favorite() {
const [favorite, setFavorite] = useState([]);
const [movies, setMovies] = useState([]);
const [data, setData] = useState([]);
async function getAll() {
const { data } = await getAllFavorite();
setFavorite(data);
for (let i = 0; i < data.length; i++) {
const url = `http://www.omdbapi.com/?s=${data[i]}&apikey=aea06659`;
const response = await fetch(url);
const responseJson = await response.json();
const obj = responseJson.Search[0];
if (responseJson.Search) {
setMovies(obj.Title);
}
}
}
useEffect(() => {
getAll(favorite);
}, []);
This is the return of favorite component
<div className="row">
{movies.map((movie) => (
<FavoriteChiled movie={movie} />
))}
</div>
this is the child componnent
function FavoriteChiled(props) {
let { movies } = props;
return (
<>
<div key={movies.imdbID} className="image-container d-flex justify-content-start m-3">
<img src={movies.Poster} alt="movie"></img>
</div>
</>
);
}
the console error
favorite.jsx:32 Uncaught TypeError: Cannot read properties of undefined (reading 'map')
at Favorite (favorite.jsx:32:1)
at renderWithHooks (react-dom.development.js:16305:1)
at updateFunctionComponent (react-dom.development.js:19588:1)
at beginWork (react-dom.development.js:21601:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)`
or this error
favorite.jsx:32 Uncaught TypeError: movies.map is not a function
at Favorite (favorite.jsx:32:1)
at renderWithHooks (react-dom.development.js:16305:1)
at updateFunctionComponent (react-dom.development.js:19588:1)
at beginWork (react-dom.development.js:21601:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)`
Related
ok so I have this code (I'm using firebase) and this is my component Cards, I have another Component which has a link button that leads to another cathegory of my store, but in this code when I try to render the cathegory which is supposed to lead to, it doesnt render anything
import Card from "react-bootstrap/Card";
import { collection, getDocs} from "firebase/firestore";
import { db } from "../firebaseConfig/firebase.js";
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import "./Cards.css"
import { useParams } from "react-router-dom";
const Cards = () => {
const [products, setProducts] = useState([]);
const productsCollection = collection(db, "zproducts");
const categoria = useParams()
const getProducts = async () => {
const data = await getDocs(productsCollection);
if(categoria.category){
const dataCategory = data.docs.map((doc) => ({ ...doc.data(), id: doc.id }))
setProducts(dataCategory.filter(i=> i.category == categoria.category))
console.log(products)
}else {
setProducts(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
}
}
useEffect(()=>{
getProducts()
},[categoria.category])
return (
<>
<div className="d-flex flex-wrap justify-content-center">
{products.map((product) => (
<Card className="card" key={product.id} style={{ width: "18rem" }}>
<Card.Img variant="top" className="cardImg" src={product.imgProduct} />
<Card.Body>
<Card.Title>{product.name}</Card.Title>
<div className="d-flex justify-content-around">
<Link variant="primary" className="btn btn-dark boton btnDetalles" to={`/Item/${product.id}`}>Ver Detalles</Link>
</div>
</Card.Body>
</Card>
))}
</div>
</>
);
}
export default Cards;
also when I open the console, I have a bunch of errors for some reasons
Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf')
at rt.fromString (bundle.js:2286:13)
at Aa (bundle.js:18047:18)
at ItemDetailContainer (bundle.js:168:73)
at renderWithHooks (bundle.js:53227:22)
at mountIndeterminateComponent (bundle.js:56513:17)
at beginWork (bundle.js:57809:20)
at HTMLUnknownElement.callCallback (bundle.js:42819:18)
at Object.invokeGuardedCallbackDev (bundle.js:42863:20)
at invokeGuardedCallback (bundle.js:42920:35)
at beginWork$1 (bundle.js:62794:11)
bundle.js:55331 The above error occurred in the <ItemDetailContainer> component:
at ItemDetailContainer (http://localhost:3000/static/js/bundle.js:166:80)
at RenderedRoute (http://localhost:3000/static/js/bundle.js:67267:5)
at Routes (http://localhost:3000/static/js/bundle.js:67732:5)
at Router (http://localhost:3000/static/js/bundle.js:67670:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:65875:5)
at App
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError # bundle.js:55331
bundle.js:49671 Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf')
at rt.fromString (bundle.js:2286:13)
at Aa (bundle.js:18047:18)
at ItemDetailContainer (bundle.js:168:73)
at renderWithHooks (bundle.js:53227:22)
at mountIndeterminateComponent (bundle.js:56513:17)
at beginWork (bundle.js:57809:20)
at beginWork$1 (bundle.js:62772:18)
at performUnitOfWork (bundle.js:62041:16)
at workLoopSync (bundle.js:61964:9)
at renderRootSync (bundle.js:61937:11)
my github link to the proyect: https://github.com/LeandroMore1/PreEntrega2-More
I am learning reaction-query for the first time.
I installed react-query and checked that it works well. And now I'm going to use the ReactQueryDevtools tool.
However, if I install ReactQueryDevtools and add it to my code, the following error occurs.
<ReactQueryDevtools initialIsOpen={false} />
Remove this code from App.tsx and it will run normally.
output errors (in web console)
QueryClientProvider.tsx:48 Uncaught Error: No QueryClient set, use QueryClientProvider to set one
at useQueryClient (QueryClientProvider.tsx:48:1)
at ReactQueryDevtoolsPanel (devtools.tsx:438:1)
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
useQueryClient # QueryClientProvider.tsx:48
ReactQueryDevtoolsPanel # devtools.tsx:438
renderWithHooks # react-dom.development.js:16305
updateForwardRef # react-dom.development.js:19226
beginWork # react-dom.development.js:21636
callCallback # react-dom.development.js:4164
invokeGuardedCallbackDev # react-dom.development.js:4213
invokeGuardedCallback # react-dom.development.js:4277
beginWork$1 # react-dom.development.js:27451
performUnitOfWork # react-dom.development.js:26557
workLoopSync # react-dom.development.js:26466
renderRootSync # react-dom.development.js:26434
performConcurrentWorkOnRoot # react-dom.development.js:25738
workLoop # scheduler.development.js:266
flushWork # scheduler.development.js:239
performWorkUntilDeadline # scheduler.development.js:533
QueryClientProvider.tsx:48 Uncaught Error: No QueryClient set, use QueryClientProvider to set one
at useQueryClient (QueryClientProvider.tsx:48:1)
at ReactQueryDevtoolsPanel (devtools.tsx:438:1)
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
useQueryClient # QueryClientProvider.tsx:48
ReactQueryDevtoolsPanel # devtools.tsx:438
renderWithHooks # react-dom.development.js:16305
updateForwardRef # react-dom.development.js:19226
beginWork # react-dom.development.js:21636
callCallback # react-dom.development.js:4164
invokeGuardedCallbackDev # react-dom.development.js:4213
invokeGuardedCallback # react-dom.development.js:4277
beginWork$1 # react-dom.development.js:27451
performUnitOfWork # react-dom.development.js:26557
workLoopSync # react-dom.development.js:26466
renderRootSync # react-dom.development.js:26434
recoverFromConcurrentError # react-dom.development.js:25850
performConcurrentWorkOnRoot # react-dom.development.js:25750
workLoop # scheduler.development.js:266
flushWork # scheduler.development.js:239
performWorkUntilDeadline # scheduler.development.js:533
react_devtools_backend.js:4026 The above error occurred in the <ForwardRef(ReactQueryDevtoolsPanel)> component:
at ReactQueryDevtoolsPanel (http://localhost:3000/static/js/bundle.js:59906:5)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:60636:5)
at aside
at ReactQueryDevtools (http://localhost:3000/static/js/bundle.js:59679:5)
at App
at QueryClientProvider (http://localhost:3000/static/js/bundle.js:46246:21)
at Fe (http://localhost:3000/static/js/bundle.js:54471:60)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
overrideMethod # react_devtools_backend.js:4026
logCapturedError # react-dom.development.js:18687
update.callback # react-dom.development.js:18720
callCallback # react-dom.development.js:13923
commitUpdateQueue # react-dom.development.js:13944
commitLayoutEffectOnFiber # react-dom.development.js:23391
commitLayoutMountEffects_complete # react-dom.development.js:24688
commitLayoutEffects_begin # react-dom.development.js:24674
commitLayoutEffects # react-dom.development.js:24612
commitRootImpl # react-dom.development.js:26823
commitRoot # react-dom.development.js:26682
finishConcurrentRender # react-dom.development.js:25892
performConcurrentWorkOnRoot # react-dom.development.js:25809
workLoop # scheduler.development.js:266
flushWork # scheduler.development.js:239
performWorkUntilDeadline # scheduler.development.js:533
QueryClientProvider.tsx:48 Uncaught Error: No QueryClient set, use QueryClientProvider to set one
at useQueryClient (QueryClientProvider.tsx:48:1)
at ReactQueryDevtoolsPanel (devtools.tsx:438:1)
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at beginWork$1 (react-dom.development.js:27426:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)
at renderRootSync (react-dom.development.js:26434:1)
at recoverFromConcurrentError (react-dom.development.js:25850:1)
index.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { ThemeProvider } from "styled-components";
import { lightTheme, darkTheme } from "./theme";
import { QueryClient, QueryClientProvider } from "react-query";
// Create a client
const queryClient = new QueryClient();
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
<React.StrictMode>
<ThemeProvider theme={darkTheme}>
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>
</ThemeProvider>
</React.StrictMode>
);
App.tsx
import React from "react";
import Router from "./Router";
import { ReactQueryDevtools } from "#tanstack/react-query-devtools";
function App() {
return (
<>
<Router />
<ReactQueryDevtools initialIsOpen={false} />
</>
);
}
export default App;
package.json
"#tanstack/react-query": "^4.16.1",
"#tanstack/react-query-devtools": "^4.16.1",
May I know the cause and solution of this problem?
you are using react-query v4 so you have to change your import statement
change :
import { QueryClient, QueryClientProvider } from "react-query";
to :
import { QueryClient, QueryClientProvider, useQuery } from '#tanstack/react-query'
This is the console log error
Uncaught Error: Objects are not valid as a React child (found: object with keys {_id, inputText, __v}). If you meant to render a collection of children, use an array instead.
at throwOnInvalidObjectType (react-dom.development.js:14887:1)
at reconcileChildFibers (react-dom.development.js:15828:1)
at reconcileChildren (react-dom.development.js:19167:1)
at updateHostComponent (react-dom.development.js:19924:1)
at beginWork (react-dom.development.js:21618:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
I am being able to save my input to the server but am getting error while trying to fetch it.
Here's the component which is supposed to return the list.
import React, { useState, useEffect } from "react";
import ToDoItem from "./ToDoItem";
import InputArea from "./InputArea";
import "bootstrap/dist/css/bootstrap.min.css";
import axios from "axios";
const ToDoList = () => {
const [x, setX] = useState([]);
const xList = () => {
return x.map((y,index) => {
return <ToDoItem key={index} text={y} />;
});
};
useEffect(() => {
axios
.get("http://localhost:5000/")
.then((res) => {
setX(res.data);
})
.catch((err) => console.log(err));
}, []);
return (
<div className="container">
<div className="heading">
<h1>To-Do List</h1>
</div>
<InputArea />
<div>{xList()}</div>
</div>
);
};
export default ToDoList;
That specific error usually occurs when you are trying to print out an entire object instead of lets say the properties from each object.
Can you console.log the list and let us know what properties you have for each object?
What I'm doing wrong. Below is my code.
// Imports
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
import { app } from "../../firebase.config";
import { useStateValue } from "../../context/StateProvider";
import { actionType } from "../../context/Reducer";
const firebaseAuth = getAuth(app);
const googleAuthProvider = new GoogleAuthProvider();
const [{user}, dispatch] = useStateValue();
const [isMenu, setIsMenu] = useState(false);
const login = async () => {
// const response = await signInWithPopup(firebaseAuth, googleAuthProvider);
// console.log(response);
if (!user) {
const {
user: { refreshToken, providerData },
} = await signInWithPopup(firebaseAuth, googleAuthProvider);
dispatch({
type: actionType.SET_USER,
user: providerData[0],
});
localStorage.setItem("user", JSON.stringify(providerData[0]));
} else {
setIsMenu(!isMenu);
}
};
// StateProvider.js
import React, {createContext , useContext, useReducer } from 'react';
export const StateContext = createContext();
export const StateProvider = ({Reducer,InitialState,children}) => (
<StateContext.Provider value = {useReducer(Reducer,InitialState)} > {children} </StateContext.Provider>
)
export const useStateValue = () => useContext(StateContext);
// reducer.js
export const actionType = {
SET_USER : 'SET_USER'
}
export const Reducer = (state, action) => {
// console.log(action);
switch(action.type) {
case actionType.SET_USER:
return {
...state,
user: action.user,
};
default:
return state;
}
}
// InitialState.js
import { fetchUser } from '../utils/fetchUserFromLocalStorage';
const userInfo = fetchUser();
export const InitialState = {
user : userInfo
}
// Error I'm getting
Header.jsx:31 Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
at Header (Header.jsx:31:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)
I had imported every thing perfectly also used it coorect way. My page isn't rendering anything. It is compiled perfectly with 0 error. Error i'm getting is typeerror but i didn't see any type erro. Please help me.
I've set a custom Key extractor for the orders items in the cart, also getting VirtualizedList: missing keys for items, make sure to specify a key or id property on each item or provide a custom key extractor.
Here is code for the orders page.
import React, { useState, useCallback} from "react"
import { View, FlatList, Text} from "react-native"
import axios from "axios"
import baseURL from "../../assets/common/baseUrl"
import { useFocusEffect } from "#react-navigation/native"
import OrderCard from "../../Shared/OrderCard"
const Orders = (props) => {
const [orderList, setOrderList] = useState();
useFocusEffect(
useCallback(
() => {
getOrders();
return () => {
setOrderList();
}
},
[],
)
)
const getOrders = () => {
axios
.get(`${baseURL}orders`)
.then((x) => {
setOrderList(x.data);
})
.catch((error) => console.log(error))
}
return (
<View>
<FlatList
data={orderList}
renderItem={({ item }) => (
<OrderCard navigation={props.navigation} {...item} editMode={true}/>
)}
keyExtractor={(item) => item.id}
/>
</View>
)
}
export default Orders;
After placing the orders by adding item to the cart,
There is no error shown or pop up in the mobile app,
The error is shown in the console where the react-native app is run
VirtualizedList: missing keys for items, make sure to specify a key or id property on each item or provide a custom keyExtractor.,
at node_modules\react-native\Libraries\LogBox\LogBox.js:117:10 in registerWarning
at node_modules\react-native\Libraries\LogBox\LogBox.js:63:8 in warnImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:36:4 in console.warn
at node_modules\expo\build\environment\react-native-logs.fx.js:18:4 in warn
at node_modules\react-native\Libraries\Lists\VirtualizedList.js:1075:8 in render
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:12479:21 in finishClassComponent
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:12404:43 in updateClassComponent
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19182:22 in beginWork$1
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18086:22 in performUnitOfWork
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18014:38 in workLoopSync
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17978:18 in renderRootSync
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17675:33 in performSyncWorkOnRoot
at [native code]:null in performSyncWorkOnRoot
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5322:31 in runWithPriority$argument_1at node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5317:21 in flushSyncCallbackQueueImplat node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5305:28 in flushSyncCallbackQueue
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17719:28 in batchedUpdates$1
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2492:29 in batchedUpdates
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2638:16 in _receiveRootNodeIDEvent
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2767:27 in receiveTouches
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
at [native code]:null in callFunctionReturnFlushedQueue
Here is the picture for it