I'm trying to render my Guild component with data from Firestore. I put the data from Firestore into my state as an array, then when I call the component and try to render it, nothing shows. I want to believe I'm doing something very wrong here (haven't been working with React for very long), but I'm not getting any errors or warnings, so I'm not sure exactly what's happening.
Guilds.js
<Col>
<Card>
<CardBody>
<CardTitle className={this.props.guildFaction}>{this.props.guildName}</CardTitle>
<CardSubtitle>{this.props.guildServer}</CardSubtitle>
<CardText>{this.props.guildDesc}</CardText>
</CardBody>
</Card>
</Col>
Render function
renderCards() {
var guildComp = this.state.guilds.map(guild => {
console.log(guild)
return <Guilds
key={guild.id}
guildFaction={guild.guildFaction}
guildServer={guild.guildServer}
guildName={guild.guildName}
guildDesc={guild.guildDesc} />
})
return <CardDeck>{guildComp}</CardDeck>
}
Fetching Firestore Data
guildInfo() {
Fire.firestore().collection('guilds')
.get().then(snapshot => {
snapshot.forEach(doc => {
this.setState({
guilds: [{
id: doc.id,
guildDesc: doc.data().guildDesc,
guildFaction: doc.data().guildFaction,
guildName: doc.data().guildName,
guildRegion: doc.data().guildRegion,
guildServer: doc.data().guildServer
}]
})
console.log(doc.data().guildName)
})
})
}
UPDATE: solved, fix is in the render function.
Well, you using state "guilds" but you update state "posts" or I miss something?
I see few things here:
your component is Guild.js, but you are rendering <Guilds />
You are setting state to posts, but using this.state.guilds to render the components
You are overriding that piece of state each time to the last object in the snapshot, with the way you are mapping the Firestore data
you are setting the ids in the list wrong using doc.id instead of doc.data().id
You aren't mapping guilds to render. guilds is an array of guild objects, so you should do something like guilds.map(guild => { return <Guild /> }
These are few things to fix, and then try to console.log(this.state.guilds) before rendering and see if you get the right data
I think your issue is that because setState is async, by the time it actually sets the state doc is no longer defined. Try creating the array first, then call setState outside of the loop ie:
guildInfo() {
Fire.firestore().collection('guilds')
.get().then(snapshot => {
let guilds = []
snapshot.forEach(doc => {
guilds.push({
id: doc.id,
guildDesc: doc.data().guildDesc,
guildFaction: doc.data().guildFaction,
guildName: doc.data().guildName,
guildRegion: doc.data().guildRegion,
guildServer: doc.data().guildServer
});
})
this.setState({guilds});
})
}
Try to use a map function, and in the callback function of the setState, try to console log your state after the update:
guildInfo() {
Fire.firestore().collection('guilds')
.get()
.then(snapshot => {
const guilds = snapshot.map(doc => {
return {
id: doc.id,
guildDesc: doc.data().guildDesc,
guildFaction: doc.data().guildFaction,
guildName: doc.data().guildName,
guildRegion: doc.data().guildRegion,
guildServer: doc.data().guildServer
};
this.setState({guilds}, () => console.log(this.state))
})
})
})
}
If in the console log there's a little [i] symbol near your state, it means that the state is not ready, and therefore it's am async issue. Replacing the forEach with the map function may already help though.
Related
I'm tying to find a way to correct the Hook rendering error. I have a total of 3 useQuery hooks being rendered :
const {
data: OSData,
error: OSError,
loading: OSLoading,
} = useQuery(OSData, {
variables: {
NUMBER: UniqueList,
},
})
const {
data: RamData,
error: RamERROR,
loading: RamLOADING,
} = useQuery(GET_Ram)
const {
data: Hardware,
error: HardwareERROR,
loading: HardwareLOADING,
} = useQuery(GET_Hardware)
The variable 'NUMBER' is based on a list 'UniqueList' that is made from the GET_Ram and GET_Hardware queries so the OSData query needs to be called later or there's an undefined variable. However, calling the OSData Query later in the code gives me a render error.
Any idea on how I could accomplish this?
Thank you!
an answer I found is using lazy query.
const SomeData [{
called, loading, data
}] = useLazyQuery(OSData)
})
if (called && loading) return <p>Loading ...</p>
if (HardwareLOADING || RamLOADING) return <p> loading</p>
if (HardwareERROR || RamERROR) return <p>error</p>
//perform all the needed calculations for the variable here
and in the return statement you can call the query and provide the variable. Here I use a button.
<div>
<button onClick={() => SomeData({ variables: { NUMBER: uniqueList } })}>
Load{' '}
</button>
</div>
Hope this helps someone
useEffect(()=>{
// console.log(`Ahanda items`,items)
setItems(JSON.parse(localStorage.getItem(`baskets`)) )
},[])
useEffect(()=>{
localStorage.setItem(`baskets`,`${JSON.stringify(items)}`)
},[items])
Hello i have classic async problem have.
problem is
there is basket for eccommerce shopping site basket simple one i want to
when site is refreshing if localstorage inside have any list of product item pull
and setItem
but the problem is the other items Useeffect works to. So if i add timeout and do like that :
useEffect(()=>{
// console.log(`Ahanda items`,items)
setItems(JSON.parse(localStorage.getItem(`baskets`)) )
},[])
useEffect(()=>{
setTimeout(() => {
localStorage.setItem(`baskets`,`${JSON.stringify(items)}`)
}, 200);
},[items])
but the problem is not solved because some times i can be use api's
here is other explanation https://www.youtube.com/watch?v=-mTvd1O-3nM
I might get the question wrong. But please correct me.
Are you looking for something like this ????
const[items, setItems] = useState([])
function handleFetchItems(){
if(localStorage.baskets){ //call this only if I have items
setItems(state =>[...state,...JSON.parse(localStorage.getItem(`baskets`))]
}
fetch(`url`).then((response) => { //async operation
setItems(state =>[...state,...response])
}).catch(() => {})
}
useEffect(useCallback(() => {handleFetchItems()},[]))
I already face This problem, and solve it by making a custom hook :
by the way, This custom hook was created by Kent creator of Remix , you can check it here : https://github.com/kentcdodds/react-hooks
usage:
const [name, setName] = useLocalStorageState({
defaultValue: 'default value',
key: 'name',
})
name is the value stored under the key 'name' in localStorage
setName is the setter of the new data in key 'name' in localStorage
I have this page which shows a single post and I have a like button. if the post is liked, when the user clicks the button, it changes its state to unlike button, but if the post is not liked, then the like is getting registered and the id is getting pushed on to the array, but the button state is not getting updated and I have to reload the page to see the page. Can someone tell me how to resolve this issue?
This is the code:
const [liked, setLiked] = useState(false)
const [data, setData] = useState([]);
function likePosts(post, user) {
post.likes.push({ id: user });
setData(post);
axiosInstance.post('api/posts/' + post.slug + '/like/');
window.location.reload()
}
function unlikePosts(post, user) {
console.log('unliked the post');
data.likes = data.likes.filter(x => x.id !== user);
setData(data);
return (
axiosInstance.delete('api/posts/' + post.slug + '/like/')
)
}
For the button:
{data.likes && data.likes.find(x => x.id === user) ?
(<FavoriteRoundedIcon style={{ color: "red" }}
onClick={() => {
unlikePosts(data, user)
setLiked(() => liked === false)
}
}
/>)
: (<FavoriteBorderRoundedIcon
onClick={() => {
likePosts(data, user)
setLiked(() => liked === true)
}
}
/>)
}
Thanks and please do ask if more details are needed.
As #iz_ pointed out in the comments, your main problem is that you are directly mutating state rather than calling a setState function.
I'm renaming data to post for clarity since you have said that this is an object representing the data for one post.
const [post, setPost] = useState(initialPost);
You don't need to use liked as a state because we can already access this information from the post data by seeing if our user is in the post.likes array or not. This allows us to have a "single source of truth" and we only need to make updates in one place.
const isLiked = post.likes.some((like) => like.id === user.id);
I'm confused about the likes array. It seems like an array of objects which are just {id: number}, in which case you should just have an array of ids of the users who liked the post. But maybe there are other properties in the object (like a username or timestamp).
When designing a component for something complex like a blog post, you want to break out little pieces that you can use in other places of your app. We can define a LikeButton that shows our heart. This is a "presentation" component that doesn't handle any logic. All it needs to know is whether the post isLiked and what to do onClick.
export const LikeButton = ({ isLiked, onClick }) => {
const Icon = isLiked ? FavoriteRoundedIcon: FavoriteBorderRoundedIcon;
return (
<Icon
style={{ color: isLiked ? "red" : "gray" }}
onClick={onClick}
/>
);
};
A lot of our logic regarding liking and unliking could potentially be broken out into some sort of usePostLike hook, but I haven't fully optimized this because I don't know what your API is doing and how we should respond to the response that we get.
When a user clicks the like button we want the changes to be reflected in the UI immediately, so we call setPost and add or remove the current user from the likes array. We have to set the state with a new object, so we copy all of the post properties that are not changing with the spread operator ...post and then override the likes property with an edited version. filter() and concat() are both safe array functions which return a new copy of the array.
We also need to call the API to post the changes. You are using the same url in both the "like" and "unlike" scenarios, so instead of calling axios.post and axios.delete, we can call the generalized function axios.request and pass the method name 'post' or 'delete' as an argument to the config object. [axios docs] We could probably combine our two setPost calls in a similar way and change likePost() and unlikePost() into one toggleLikePost() function. But for now, here's what I've got:
export const Post = ({ initialPost, user }) => {
const [post, setPost] = useState(initialPost);
const isLiked = post.likes.some((like) => like.id === user.id);
function likePost() {
console.log("liked the post");
// immediately update local state to reflect changes
setPost({
...post,
likes: post.likes.concat({ id: user.id })
});
// push changes to API
apiUpdateLike("post");
}
function unlikePost() {
console.log("unliked the post");
// immediately update local state to reflect changes
setPost({
...post,
likes: post.likes.filter((like) => like.id !== user.id)
});
// push changes to API
apiUpdateLike("delete");
}
// generalize like and unlike actions by passing method name 'post' or 'delete'
async function apiUpdateLike(method) {
try {
// send request to API
await axiosInstance.request("api/posts/" + post.slug + "/like/", { method });
// handle API response somehow, but not with window.location.reload()
} catch (e) {
console.log(e);
}
}
function onClickLike() {
if (isLiked) {
unlikePost();
} else {
likePost();
}
}
return (
<div>
<h2>{post.title}</h2>
<div>{post.likes.length} Likes</div>
<LikeButton onClick={onClickLike} isLiked={isLiked} />
</div>
);
};
CodeSandbox Link
I just got started to react so please bear with me. I don't know exactly what I am doing, I'm just picking those things as I go so I'll do my best to walk you through my mental process when building this.
My intentions are to create a registration component, where the backend returns the validation errors in case there are any in form of an object which has following structure.
{
"username": [
"A user with that username already exists."
],
"email": [
"A user is already registered with this e-mail address."
]
}
The state manager that I chose to be using is redux, so this comes back every time when the register function is dispatched.
Since it has this structure I wrote a function to help me decompose it and pick up only on the actual errors (the strings).
const walkNestedObject = (obj, fn) => {
const values = Object.values(obj)
values.forEach(val =>
val && typeof val === "object" ? walkNestedObject(val, fn) : fn(val))
}
now I want to display them in the view, so I wrote another function which is supposed to do that
const writeError = (value) => {
return <Alert message={value} type="error" showIcon />
}
Down in the actual component I am calling it as this:
{(props.error) ? walkNestedObject(props.error, writeError) : null}
To my surprise if I console.log the value above return in writeError it works flawlessly, every single error gets printed, but none of them gets rendered.
To debug this I've tried multiple variations and none of them seemed to work, I even called the writeError function in the component as
{writeError('test')}
and it worked for some reason.
At this stage I'm just assuming there's some react knowledge required to fulfil this task that Im just now aware of.
EDIT:
A mock example can be found over here
Also, I've tried using the first two answers and when mapping through the errors I get this
Unhandled Rejection (TypeError): props.error.map is not a function
with other variations, it mentions the promise from so I'd include how I manage the API request
export const authSignup = (username, email, password1, password2) => dispatch => {
dispatch(authStart());
axios.post('http://127.0.0.1:8000/rest-auth/registration/', {
username: username,
email: email,
password1: password1,
password2: password2
})
.then(res => {
const token = res.data.key;
const expirationDate = new Date(new Date().getTime() + 3600 * 1000);
localStorage.setItem('token', token);
localStorage.setItem('expirationDate', expirationDate);
dispatch(authSuccess(token));
dispatch(checkAuthTimeout(3600));
})
.catch(err => {
dispatch(authFail(err.response.data))
})
}
Consider changing the topology of your error messages:
"errors": [
{ "type": "username", "message": "Username already in use." },
{ "type": "email", "message": "Email address already in use."}
]
That makes your implementation a bit easier:
// MyLogin.jsx
import React from 'react'
const MyLogin = () => {
/**
* Here we're using state hooks, since it's much simpler than using Redux.
* Since we don't need this data to be made globally available in our
* application, it doesn't make sense to use Redux anyway.
*/
const [errors, setErrors] = React.useState([])
const handleLogin = (event) => {
event.preventDefault()
axios.post('/api/login', formData).then(() => successAction(), (error: any) => {
setErrors(error) // Update our local state with the server errors
})
}
return (
<>
{errors.length && ( // Conditionally render our errors
errors.map((error) => (
<Alert type={error.type} message={error.message} />
)
)}
<form onSubmit={handleLogin}>
<input type='text' name='email' />
<input type='text' name='username' />
<input type='password' name='password' />
</form>
<>
)
}
export default MyLogin
Your walkNestedFunction function checks each layer of an object, and if a given layer of the object is an object itself, it then uses that object to run your function - which in this case is writeError. writeError returns an error <Alert /> as soon as an error arises. But when you stick writeError inside the circular logic of walkNestedFunction, it will hit the first return statement, render it to the page, and then stop rendering. I think this is why you're getting the complete list of errors logged to the console. Your walkNestedFunction continues cycling down through object layers until its done. But in React, only the first return statement will actually render.
A better tactic would be to modify your writeError function to record the erors to a state variable. Then you can render this state variable. Every time the state is updated, the component will rerender with the updated state.
// Define state in your component to contain an array of errors:
state = {
errors: []
}
// Add an error into state with each iteration of writeError
const writeError = (error) => {
this.setState({
errors: [
...this.state.errors,
error
]
})
}
// inside render(), render the state variable containing your errors
<div>
{ this.state.errors.map(error => <p>error</p>) }
</div>
`
I am attempting to build a chat app interface using react native and firebase and am having problems updating the data that is fetched from my database. I can load existing data into the Flatlist I am using fine:
const firebaseApp = firebase.initializeApp(firebaseConfig);
let db = firebaseApp.database();
let ref = db.ref("/room");
componentDidMount() {
ref.on('value', function(snapshot) {
snapshot.forEach(function (childSnapshot){
childData.push(childSnapshot.val());
});
this.setState({
messages: childData
});
messageCount = snapshot.numChildren();
}.bind(this));
}
Flatlist Code:
<KeyboardAvoidingView style={styles.inputContainer}>
<FlatList
data={this.state.messages}
// renderItem={({item}) =><Text>{item.contents}</Text>}
keyExtractor = {item => item.timestamp}
renderItem={({item}) => <Bubble style={{margin: 10}}
color="#FFC800" arrowPosition='right'>{item.contents}</Bubble>}
/>}
/>
<Button onPress={()=>{this.onPressButton()}} title="Send">Click me</Button>
</KeyboardAvoidingView>
This is where I add the text in a text input to the database
function addMessage(messageText) {
messageCount++;
firebase.database().ref('room/'+messageCount).set({
contents: messageText,
timestamp: firebase.database.ServerValue.TIMESTAMP
});
}
That code gives me the following result which is what I want (ignore the terrible styling):
But whenever I try to send a message, it gets added to the database correctly, but the flatlist updates to show this:
Where the previous message and the new message are rendered multiple times. What is the best way to render a new item from the database into the flatlist?
Looking at your code I couldn't find where you are initializing your childData.
Assuming that your database is correct, then it looks like you are not cleaning childData before assigning it to your state here
this.setState({
messages: childData
});
So when your code run this push childData.push(childSnapshot.val()); it adds to your array all the new content and keeps the old one.
Example:
First state:
// snapshot.val() contains ['Hello']
childData = ['Hello']
Submited text: World!
Updated state:
// snapshot.val() contains ['Hello', 'World']
childData = ['Hello', 'Hello', 'World!']
A suggestion to solve this would be to assign the array only with the new value, so instead of using push, you could do something like this childData = snapshot.val()
I also suggest you to debug your code with some console.log in order to understand what is being retrived by snapshot.val() or childData, or this.state.messages
Hope it helps
Edit:
Reading again, a possible problem could also be that since JS is sync, your setState is being called before your forEach is finished. A solution could be using async/await https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
Something like this:
ref.on('value', async (snapshot) => {
const childData = await snapshot.map((childSnapshot) => {
childSnapshot.val();
});
this.setState({
messages: childData
});
(...)
Consider the code above just as an example
Hope it helps