I am new on web development.. Sorry if the question sounds stupid or if I had mess up with my code.
I have this problem: I've tried to create a simple "To Do List" application using MERN stack.
I did connect React with the backend: I can send get and post request and they are working (i'm adding items to my mongoDB).
Here comes the issue: I cannot delete item from my list. The delete request is not working because I'm not able to get my item ID in react and honestly I don't know why.
Here it is my react code:
code
The problem should be that I'm not getting the ID of my data... But I don't know how to fix it
the problem is that instead of passing the id to deleteNow function, you are passing the parameters from the onPress event.
So, if you want to make it work, do this change:
change:
onPress={deleteNow} to onPress={() => deleteNow(data._id)}
Update onPress={() => deleteNow(data._id)} . if you not did that in SingleItem component
I am adding one more point.
your code
In addNote function -
1.update the state data with newItem received in the function.
2.then updated the Db.
now, the problem is the newItem added to data state won't have _id property because it is not from db.
my suggestion
1. post your data as you did with axios.
2. received the newly added db document via response and add to data state.
Related
I am having a trouble using the Material Table from mbrn. I will try to resume the problem as better as i can. Here it goes an image:
Material Table used
I am using this table component. I am using remote data that comes from an API call. The problem is that on each letter that i type on each column filter, the table updates and call the API for refresh. I don't want that.
What i want is to let the user write the column filters that he wants and then click on the "Atualizar" button and when clicked the call to API with the filters and the refresh happens.
Anyone can help me to do it?
Try following, useEffect() with no dependency so it will get fetch data from API only one time when component render first time
useEffect(()=>{
// api call or fetch data
},[])
I'm new in reactjs. I'm creating a movie web with redux thunk. At home container, I use axios to call API to get a list of movie data and save it in store.
My home container has a carousel component gets that data on store by useSelector and loop it to render many carousel items. The problem is here. The initial data state in store is null, and while my app call API, carousel component still maps it and get error there:
TypeError: Cannot read property 'map' of null
I have solved this with ? syntax: data?.map()... and don't get that error.
I wonder may we have any solution better than mine? I mean it can waiting until the fetch data success instead of using ?. in any component.
Thank you if anyone help me some solution. You can just give me some key word or library, which is used in real project. I will study to import myselt.
Thank you
use empty array instead of null, as initial state of movie store is empty.
Using ? is the shortest way or you can put an if condition to check the movies array is null or not. something like if(moviesArr !== null) //do the rest...
What I am trying to do:
useMutation to edit the email value and re render the page. The data changes on refresh but the cache needs to change as well and I am having trouble modifying the cache.
Legwork I have read/looked over before posting here:
Documentation on Mutations
Documentation on Updating cache
Obtaining an Object's Custom ID
What I think the problem is:
the GraphQL database I am using does not implement a proper ID and I can not change that. I will have to modify the ROOT_QUERY cache and update it the hard way. As my code is right now It's reading the ID I want to use (email) as undefined. The error message simply reads as "Unhandled Rejection (Error): Cannot read property 'email' of undefined" pointing to functions in the node modules and nowhere near my function.
My component's code can be found in full here, but I will point to where I think the smoking gun ultimately is.
I have tried checking as much as I can but have no way of telling if i am reaching things correctly. I have looked at other stack posts, youtube, and tried reaching out to a few discord channels only to hit a wall. Any help and explanation would be great.
Figured out the problem was cache.identify was not needed at all! I just had to fix the InMemoryCahce at the index.tsx
const client = new ApolloClient({
uri: "http://localhost:8080/graphql",
cache: new InMemoryCache({
typePolicies: {
People: {
keyFields: ["email"],
},
},
}),
});
This made things easier on getting the right index.
Hello guys I had a problem. I don't know it is a bug or not but I think it is a bug. I would open an issue on github repo of react but first I wanted to look at here and ask to you. I will give you all my code on the bottom of this post
What is the problem?
I am connection a socket when my component first mounted and catched the user to connect live chat. And I use useState to set messages when I or agent send a messsage on message event. I use useState on the line of 114. First of all this useState(setMessages on ) works correctly. But If I set the setMessages by the other ways this won't work.
For Example 1:
If I set this setMessages like below, setMessages works correctly and changes state but messages state not rendering on DOM correctly. I didn't udnerstand what's wrong.
const dummy = [...messages]
dummy.push(data.messageData)
setMessages(dummy)
For Example 2:
If I set this setMessages like below, setMessages doesn't work and I got an error and I never see my rendered page because it say ...prev is a null. I didn't understand what's wrong again.
setMessages((prev) => [...prev, data.messageData])
For Example 3:
This is the most interesting part of my code. It's really impossible one. If I remove line 111 and 112 (those are below here) the version of runs correctly of my codes doesn't work and setMessages doesnt work by the way with concat either. And I don't use those codes anywhere you can see that by using Ctrl+F. I just described those to set setMessages with the dummy variable but that didn't work and now I can't delete them because if I delete them my working codes won't work either.
const dummy = messages
dummy.push(data.messageData)
Now guys what's wrong on there. I fight all day with this buy I didnt find any reason. Is it a bug or not? Have a good days I will be here for your replies.
This is all of my codes in the page that I have a problem
https://gist.github.com/mucahidyazar/5ccff6d67d95d23dfb470dfe026f714b
You are using the useState incorrectly and its not a problem with react ;)
You need to create a new object reference if you use setState.
For example a string, number or boolean are always new instances.
But this does not work for objects. Push keeps the old object reference and setting a value to the same reference as before to the useState hook will be skipped.
const dummy = messages
dummy.push(data.messageData)
setMessages(dummy)
You are passing he same object to the setState (here setMessages) than before (push only adds the item to the same obejct), but you need a new instance instead, or else react will not rerender.
setMessages((prev) => [...prev, data.messageData])
but this only works if the default item is an array, so make sure you are setting ... = useState([]) so that prev is defined.
For line 111, yes the current object receives the new items, so the console.log shows the correct data,but since its the same instance (push does not create a new instance of the array), the rerender gets skipped and you will not see any changes on the resulting website.
o when I take a look at your code, change this:
const dummy = messages
dummy.push(data.messageData)
console.log(dummy)
setMessages(messages.concat(data.messageData).slice(0, messages.length)
to
setMessages([...messages, data.messageData])
Let's say my app is a list of many items. There's a lot of items so I don't want to include all the items in the redux state.
When a user visits me at myapp.com/item/:itemId, I want to display the selected item. Currently I make an api call in componentDidMount to fetch the item and store the response in myReduxState.selectedItem. However, this shows the user and unfinished page until the api call finishes.
Is there any way I can get around this?
The pattern I tend to follow is to have a state of fetching being tracked in the redux state. Once the api resolves you just make sure the state is set correctly and then in your render methods use that to determine what you are rendering.
render() {
if (this.state.fetching) {
return <div> // put whatever you want here, maybe a loading component?</div>
}
return (
// put the regular content you would put for when the api call finishes and have the data you need
)
}
I solved this problem by making the creating the state on the server side. I get the itemId from the url in my express route and get the details of the specific item. I use this to create the state and pass it to the front-end.