I having problem when switching pages for my react app
supposedly i have this page that displays item information for example
items/1231231231231 = display the items for that specific id and then when i move to another item using Link
<Link to{'/items/22334567'}
to move to another item and display the item infos, on its initial render the item infos from the first item (items/1231231231231) is displayed first or loaded first then after the data has been fetched for the new item, it will only display the correct information for the next item ('/items/22334567') . I understand that it is important to cache files so that when user access the same data again the browser will not fetch the data again, but the thing is this interaction is kinda confusing in my part, so I want to disable caching or displaying of the first information before loading the next information by comparing their (id) this is what im thinking. Is there any way to achieve this?
You simply need to clear the state when you start loading new data on change of item id. I have to assume how your Item component code looks like but let us say you have a state items and a setter setItems. If you load your data in a useEffect, you can do something like this:
useEffect(() => {
setItems([]);
// display loader
// code to fetch items
}, [props.itemId]
If you load new items, another way e.g. in Redux or something, please think about the exact step where you need to reset the items to an empty array. It could be the reducer or some other place.
Related
I'm new in react and i'm studing a method to make connections with Firebase to my Project.
With props I can pass an ID and search it in firebase, but when i reload my page, all the props are lost and i have this message in the image:
The value is Undefined because the props are losing their values
Is there any other way for this information don't lost?
I dont try anything because idk what to do.
The ID in the props will be used in useEffect() on my page.
Edit:
There is the Cards Image:
Cards
And here it's when i click on the card "Pinscher":
The page when i click on Pinscher
But when i Reload the page "Pinscher", i lost the Id passed with props.
The most straightforward way I know to persist data over a reload is to save it to localstorage or sessionstorage. Which one to use--and whether it's appropriate--depend on your actual use case, which we can't comment on without more knowledge of your project.
Assuming you did want to use that, a basic implementation would be to write helper functions when you set state to also save the data to storage. Your initial state load would then look for storage information as its default and then fallback to null if it can't find anything in storage.
const [arbData, setArbData] = useState(window.localStorage.getItem('arbData'));
const setArbDataWrapper = (data) => {
setArbData(data);
window.localStorage.set('arbData', data);
}
I have a React component in which I have a list of items that I store as a dictionary:
const [list, setList] = useState<{ [id: number]: MyProps }>({});
and I render this list as a table in the render method:
{Object.entries(list).map(v =>
<MyTableRow
// #ts-ignore
id={v[0]}
start_date={v[1].start_date}
end_date={v[1].end_date}
dollar_amount={v[1].dollar_amount}
key={v[0]} />
)}
MyTableRow is another React component and basically returns a HTML tr element whose columns are populated based on props passed to it.
So far so good and I have seen that when I add items to the list, the UI gets updated without me having to call setList.
Once I add a new item to the list, I also make some AJAX calls to fetch some additional pieces of information. This is when the problem starts to kick in. When the AJAX call completes, I update the data e.g., as follows:
var e = list[id];
e.dollar_amount = new dollar amount
But the UI does not refresh. I do not want to copy the entire list which could be quite big into a new object and then call setList. The list might have 100 elements in it. Each element corresponds to a row with say 10 columns. I want to be able to update a cell in the table and only that cell should re-render in the UI. Not the whole table. I thought that was the whole value proposition of React.
How can I make it work as described?
PS: I don't want to be making AJAX calls in the MyTableRow child component because the AJAX calls post data into a database and React can call MyTableRow many times for the same data which would result in duplicate records being added to the database.
When I first load the page, information is pulled from the database and then mapped into the variable data, where all the information is displayed as I want it.
//Maps the array and then displays the data from the database
var data = dataArray.map(info => {
//If/Else statements to display the teams in the right spacings
if(!checkIfNone(info.P1A) && !checkIfNone(info.P1M) && !checkIfNone(info.P2M) && !checkIfNone(info.P2A)){
return(/*A whole bunch table stuff*/)
}else if //etc etc
I display this in the component just fine using
return(
{data}
)
However, I am trying to implement a way to search through the data and through console.log testing I am able to store the updated information back into the data variable, but it does not update. I am unsure how to properly update this variable and I am unsure if I can use UseState and SetState since I set the state originally after a get method, then set it a different way later. Is there a good way to refresh the component while maintaining the current variable information? Or is there a way I can set the state of the map originally and change it later even if I can't set it until after the get is completed?
Since in the way I update the map, I map through each element in the dataArray, I am unsure how I would use UseState to update each element in the data map.
I have used Flatlist for showing gallary view of few recent images to select.
I have also added a button to invoke a file picker.
But the issue is to show the button as first item of flatlist I used index===0 in render method which causing the skipping of first image from data.
Whell I tried this.
while setting state which contains the data, I simply added extra element
let data = {
all:[[],...all],
anim:[[],...anim],
still:[[],...still]
}
Now it works. skips the first element of array (means returns the file picker component as item and continue with first image as next item, so first image won't get replaced by file picker)
But it does not look reliable. It won't show folder component until images extracted and set to state. Although I can set this as initial value in state.
But what is the best way to deal with it?
Thanks in advance.
Try ListHeaderComponent as what Doc recommends.
Your best solution here is to pre-define the file picker element as the 0 index of the array and populate the image from the get-go, so it shows immediately and then spread the rest of the data the way that you've done it. There are other stuff that you can try like setting header component, however it will always render above the list, and from the image it seems like your item should be inside the list.
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.