code working in development but not working in production.
when i uploaded on vercel its not working.
this is error ->
react-dom.production.min.js:189 TypeError: o.map is not a function
at gd (Home.jsx:31:15)
at xo (react-dom.production.min.js:167:137)
at Cu (react-dom.production.min.js:197:258)
at Es (react-dom.production.min.js:292:88)
at bc (react-dom.production.min.js:280:389)
at gc (react-dom.production.min.js:280:320)
at mc (react-dom.production.min.js:280:180)
at ac (react-dom.production.min.js:271:88)
at ic (react-dom.production.min.js:268:429)
at w (scheduler.production.min.js:13:203)
du # react-dom.production.min.js:189
map function code
import React, { useState, useEffect } from "react";
import styled from "styled-components";
import Card from "../components/Card";
import axios from "axios";
const Container = styled.div`
display: flex;
justify-content: space-between;
flex-wrap: wrap;
`;
const Home = ({ type }) => {
const [Videos, setVideos] = useState([]);
useEffect(() => {
const fetchVideos = async () => {
// const res = await axios.get(`http://localhost:5000/api/videos/${type}`);
const res = await axios.get(`/videos/${type}`);
setVideos(res.data);
console.log(res.data);
console.log(typeof res.data);
};
fetchVideos();
}, [type]);
return (
<Container>
{/* {Array.from(videos)
? Array.from(videos).map((video) => (
<Card key={video._id} video={video} />
))
: null} */}
{/* {Array.from(Videos).map((video) => (
<Card key={video._id} video={video} />
))} */}
{Videos.map((video) => (
<Card key={video._id} video={video} />
))}
</Container>
);
};
export default Home;
i am just want to fix this issue. i am not able to deploy this code on host because when i deploy on host its give error after deploy on site.
localhost is running good without error
Related
Everything is ok but when clicking month then got the error: Attempt to invoke interface method 'int com.facebook.react.bridge.readablearray.size()' on a null object reference.
This is the Call page:
import React from 'react';
import { SafeAreaView, View, StatusBar, Alert } from 'react-native';
import {
Layout,
Icon, Divider, Text,
TopNavigation, TopNavigationAction,
Datepicker } from '#ui-kitten/components';
const MenuIcon = (props) => (
<Icon {...props} name='menu' style={{width: 36, height: 36, color: 'gray', alignItems: 'center'}}/>
);
export const PatrolScreen = ({ navigation }) => {
const [date, setDate] = React.useState(new Date());
const MenuAction = () => (
<TopNavigationAction icon={MenuIcon} onPress={navigation.toggleDrawer}/>
);
return (
<Layout style={{ flex: 1 }}>
<StatusBar hidden={false} />
<TopNavigation title='Patrol' alignment='center' accessoryLeft={MenuAction}/>
<Divider/>
<Layout style={{ flex: 1}}>
<Datepicker
date={date}
onSelect={nextDate => setDate(nextDate)}
/>
</Layout>
</Layout>
);
};
The following is my App.js:
import React from 'react';
import * as eva from '#eva-design/eva';
import { ApplicationProvider, IconRegistry } from '#ui-kitten/components';
import { IoniconsPack } from './utils/ion-icons';
import { MaterialCommunityIconsPack } from './utils/materialcommunity-icons';
import { AppNavigator } from './routes/navigation';
import { ThemeContext } from './utils/theme.context';
export default () => {
const [theme, setTheme] = React.useState('dark');
const toggleTheme = () => {
const nextTheme = theme === 'light' ? 'dark' : 'light';
setTheme(nextTheme);
};
return (
<>
<IconRegistry icons={[IoniconsPack, MaterialCommunityIconsPack]} />
<ThemeContext.Provider value={{ theme, toggleTheme }}>
<ApplicationProvider {...eva} theme={eva[theme]}>
<AppNavigator />
</ApplicationProvider>
</ThemeContext.Provider>
</>
);
};
How to resolve this? Thanks.
After getting data from the backend, I can't get to display is on the homepage
Everthing is okay like server, database but conditional rendering is not working
Homepage UI with error
`
import React, {useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getAllPizzas } from "../actions/pizzaActions";
import Error from "../components/Error";
import Loading from "../components/Loading";
import Pizza from "../components/Pizza";
const Homescreen = () => {
const dispatch = useDispatch();
const pizzasstate = useSelector((state) => state.getAllPizzasReducer);
const { pizzas, error, loading } = pizzasstate;
useEffect(() => {
dispatch(getAllPizzas());
}, [dispatch]);
return (
<div>
<div className="row">
{loading ? (
<Loading/>
) : error ? (
<Error error='Something went wrong'/>
) : (
pizzas.map((pizza) => {
return (
<div className="col-md-3 m-3" key={pizza._id}>
<div>
<Pizza pizza={pizza} />
</div>
</div>
);
})
)}
</div>
</div>
);
};
export default Homescreen;
Thank you in advance
I'm trying to fetch some backend data on my Express.js backend which looks like this:
const express = require('express')
const app = express()
app.get("/api", (req, res) => {
res.json({"data": ["data1", "data2", "data3"]})
})
app.listen(5000, () => { console.log("Server started on port 5000, hi") })
Every time the specific page loads I want it to fetch the {"data": ["data1", "data2", "data3"]} from the backend, I added a button that makes the same request for testing as well. Whenever I click the button and whenever the page loads I get this error:
I don't really understand why I'm getting this error, here is my next.js code:
import React, { Component, useEffect, useState } from 'react';
import axios from 'axios';
export default function Product() {
const [backendData, setBackendData] = useState([{}])
useEffect(() => {
axios.get('/api').then(
response => response.json()
).then(
data => {
setBackendData(data)
}
)
console.log("ran")
}, [])
const test = () => {
axios.get('/api').then(
response => response.json()
).then(
data => {
setBackendData(data)
}
)
console.log("test clicked")
}
return (
<div style={styles.container}>
<div style={styles.speechTitle}>Talk to us, tell us about your day...</div>
<div style={styles.speechBox}>
Test
</div>
<button onClick={console.log("start")}>
Start
</button>
<button onClick={console.log("stop")}>Stop</button>
<button onClick={console.log("reset")}>Reset</button>
{(typeof backendData.data === 'undefined') ? (
<p>Loading...</p>
) : (
backendData.data.map((data, i) => (
<p key={i}>{data}</p>
))
)}
<button onClick={() => test()}>asdasd</button>
</div>
);
}
I'm running this component called Product you see above in this file called product.js which is in my pages folder:
import React from 'react';
import { ThemeProvider } from 'theme-ui';
import { StickyProvider } from 'contexts/app/app.provider';
import theme from 'theme';
import SEO from 'components/seo';
import Layout from 'components/layout';
import Product from 'components/product-input'
export default function ProductPage() {
return (
<ThemeProvider theme={theme}>
<StickyProvider>
<Layout>
<SEO title="Talkhappi" />
<Product/>
</Layout>
</StickyProvider>
</ThemeProvider>
);
}
I am also getting a network error when I open up the network tab in developer tools:
I'm unsure how to fix this problem and retrieve the data I want to retrieve from my backend running at port 5000.
You seem to have to call your apis at port 5000 instead of 3000 you did.
const baseURL = 'http://localhost:5000';
const test = () => {
axios.get(baseURL + '/api').then(
response => response.json()
).then(
data => {
setBackendData(data)
}
)
console.log("test clicked")
}
I'm having trouble for the past few days in this problem.
Explanation of the problem:
I'm using Axios in order to get data inside of state (Pokémon's), But, everything is rendering inside one component (creating an array and list and shows the list) , while I need every Pokémon I get from the API to be inside his own component (so that I can images per Pokémon and etc.)
Does anybody perhaps knows how to do so? If u do, please answer and explain to me (And if it wont be any trouble, modify the code), Thanks in advance, Mikey. (Using react-ts, node.js and axios)
import React, { useState, useEffect } from 'react';
import axios from 'axios';
export default function PokeCont() {
const [pokemons, setPokemons] = useState<any>();
const onClick = () => {
axios.get('https://pokeapi.co/api/v2/pokemon?limit=6').then((response) => {
setPokemons(response.data.results);
});
};
useEffect(() => {
onClick();
}, []);
return (
<div>
{pokemons &&
pokemons.map((pokemon: any) => (
<div key={pokemon.name}>
<p>{pokemon.name}</p>
</div>
))}
</div>
);
}
Here is an example ;)
import { useState, useEffect } from "react";
import axios from "axios";
export default function App() {
return (
<div className="App">
<PokemonContainer />
</div>
);
}
function PokemonContainer() {
const [pokemons, setPokemons] = useState<any[]>([]);
const onClick = () => {
axios.get("https://pokeapi.co/api/v2/pokemon?limit=6").then((response) => {
setPokemons(response.data.results);
});
};
useEffect(() => {
onClick();
}, []);
return (
<div>
{pokemons &&
pokemons.map((pokemon) => (
<PokemonItem key={pokemon.name} info={pokemon} />
))}
</div>
);
}
function PokemonItem({ info }) {
return (
<div>
<h2>{info.name}</h2>
<img src={info.image} width="100" height="100" alt=""></img>
</div>
);
}
Add necessary changes to components like export default and types.
import React, { useState, useEffect } from 'react'
import axios from 'axios'
***Component 1: Pokemon***
Pokemon = props => {
return (
<>
<div key={props.name}>
<p>{props.name}</p>
</div>
</>
)
}
***Component 2: Parent Pokemon which renders your Pokemon as Component ***
export default function PokeClass() {
const [pokemons, setPokemons] = useState()
const onClick = () => {
axios.get("https://pokeapi.co/api/v2/pokemon?limit=6").then((response) => {
setPokemons(response.data.results)
})
}
useEffect(() => {
onClick()
}, []);
return (
<>
{pokemons.map((item => {
return <Pokemon name={item.name} />
}))}
</>
)
}
I want to create a frontend for my app using React and TypeScript.
I am gathering data from my backend (simple DRF app) and fetching it using Axios and pushing it into separate arrays.
const myApi = axios.create({
baseURL: 'http://127.0.0.1:8000/app/',
headers: {
"Content-type": "application/json"
}
})
let idArr:number [] = new Array()
let titleArr:string [] = new Array()
let contentArr:string [] = new Array()
myApi.get('/getallarticles').then( res => {
for(let elem in res.data)
{
idArr.push(res.data[elem].id)
titleArr.push(res.data[elem].title)
contentArr.push(res.data[elem].content)
}
})
The app contains a page named feed into which I parse the id Array.
function App() {
console.log(idArr)
return (
<Box>
<Navbar/>
<Grid alignItems={"center"} justifyContent={"center"} marginLeft={'15%'} marginRight={'15%'}>
<Stack spacing={2} margin={2}>
<Box id='res_viewer'>
<Feed content={"CONTENT FROM MAIN"} id={10} title={"Sherlock Holmes"} total={5} idArr={idArr}/>
</Box>
</Stack>
</Grid>
</Box>
);
}
Then in my page Feed I copy the ActionCard (from Mui5) and the problem is that all the Cards show only if I recompile the project. It only works one time, and I have no idea why. Moreover if I put the console.log and alert into the Feed the console.log would show an array every time, while Alert only the first time. Anyone have any idea what the issue might be?
const Feed = ({ id, title, content, total, idArr }: { id: number; title: string; content: string; total: number; idArr:Array<number>}) => {
console.log(idArr)
alert(idArr)
return(
<div>
{idArr.map(customId =>
<Card key={customId} variant="outlined" sx={{ margin: 0 }}>
<CardActionArea>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
{customId}
</Typography>
<Typography variant="body2" color="text.secondary">
{content}
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button style={{
color: "#ff0000",
}} size="large" startIcon={<DeleteForever />}>
DELETE
</Button>
<Button style={{
color: "#68ee06",
}} size="large" startIcon={<Edit />}>
EDIT
</Button>
</CardActions>
</Card>
)}
</div>
)
}
export default Feed
I suspect the asynchronous nature of the call to your API is what's giving this behavior. When making calls to an API for data, it's common to use a useEffect hook that updates a state. This ensures that the UI is in sync with the data. Try rewriting as follows:
const myApi = axios.create({
baseURL: 'http://127.0.0.1:8000/app/',
headers: {
"Content-type": "application/json"
}
})
const [idArr, setIdArr] = useState([] as number[]);
const [titleArr, setTitleArr] = useState([] as string[]);
const [contentArr, setContentArr] = useState([] as string[]);
useEffect(() => {
myApi.get('/getallarticles').then(res => {
const newIds: number[] = [];
const newTitles: string[] = [];
const newContents: string[] = [];
for (let elem in res.data) {
newIds.push(res.data[elem].id);
newTitles.push(res.data[elem].title);
newContents.push(res.data[elem].content);
}
setIdArr(newIds);
setTitleArr(newTitles);
setContentArr(newContents);
});
}, []);