I try to navigate from home screen to detail screen using navigation.navigate(). When the first time i click button to navigate it works fine, but after that when i go back from detail to home and click another item to see the detail, the params on detail screen is not changed (its still the params of the 1st click). Here my code :
<TouchableNativeFeedback
key={index}
onPress={() => {
navigation.navigate('PenghuniScreen', {
screen: 'DetailPenghuni',
params: {
penghuni: item,
},
});
}}></TouchableNativeFeedback>;
item is object from map loop . i try to console log using react navigation usefocuseffect and the params not changin after 1st click.
useFocusEffect(
React.useCallback(() => {
console.log('My params:', route.params.penghuni);
setPenghuni(route.params.penghuni);
return () => {
// source.cancel('Api Canceled');
console.log('tutup detail penghuni');
};
}, []),
);
anyone got solution for this?
You forgot to add the route dependency to your useCallback, so it is getting the old value.
Try adding [route]:
React.useCallback(() => {
console.log('My params:', route.params.penghuni);
setPenghuni(route.params.penghuni);
return () => {
// source.cancel('Api Canceled');
console.log('tutup detail penghuni');
};
}, [route]),
I suggest you adding the eslint for hooks to your project, to detect missing dependecies.
Observation: Why don't you pass these values though the navigation params instead of using useFocusEffect?
navigation.navigate('DetailPenghuni', { penghuni: item1 }) // item1 press
navigation.navigate('DetailPenghuni', { penghuni: item2 }) // item2 press
If you need to cancel something you can always use the useEffect clean callback called automatically when you close a screen.
You can use route.params.penghuni directly instead of setting setPenghuni(route.params.penghuni)
useEffect(() => {
console.log('My params:', route.params.penghuni);
// setPenghuni(route.params.penghuni);
return () => {
// source.cancel('Api Canceled');
console.log('tutup detail penghuni');
};
}, [route.params?.penghuni]),
Related
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
codesandbox link
I am using react-complex-tree to show my XML in tree format. I want to add button called ExpandAllTree
const [expandedItems,setExpandedItems] = useState([]);
I am holding my tree Items here
const traverseXml = (treeData, xmlObject) => {
treeData[xmlObject.name] = {
index: xmlObject.name,
canMove: false,
hasChildren: !!xmlObject.children.length,
children: xmlObject.children.map(c => c.name),
data: !xmlObject.children.length ? `${xmlObject.name}: ${xmlObject.value}` : xmlObject.name,
canRename: false
};
if (!xmlObject.children.isEmpty) {
xmlObject.children.forEach(c => {
setExpandedItems(oldArray => [...oldArray,xmlObject.name]);
traverseXml(treeData, c);
});
}
};
this code piece does travel all XML and create a data for react-complex-tree and also gets all Id's of tree element with
setExpandedItems(oldArray => [...oldArray,xmlObject.name]);
This part works perfect.
useEffect(() => {
setExpandedItems([]);
traverseXml(firstTreeData, DocumentXml);
traverseXml(secondTreeData, AppHdrXml);
}, [treeOpen]);
const handleOpenClick = () => {
setTreeOpen(!treeOpen);
}
whenever a button hits it should rerender. But It is not rendering. when I check the logs on first time page open
expandedItems is empty like an expected when I press the button expandedItems to get all tree IDs like expected again but in frontend nothings changes.
<UncontrolledTreeEnvironment
canDragAndDrop={true}
canDropOnItemWithChildren={true}
canReorderItems={true}
dataProvider={new StaticTreeDataProvider(secondTreeData, (item, data) => ({...item, data}))}
getItemTitle={item => item.data}
viewState={{
['Apphdr']: {
expandedItems:expandedItems
},
}}
>
<Tree treeId={"Apphdr"} rootItem={"AppHdr"}/>
</UncontrolledTreeEnvironment>
And there is no mistake on data type with expandedItems because when I give data manually which expandedItems gets, Tree shows as expanded.
When you changed to ControlledTreeEnviroment and set items like
items={firstTreeData}
Tree start to rerender
So I have this nuxt page /pages/:id.
In there, I do load the page content with:
content: function(){
return this.$store.state.pages.find(p => p.id === this.$route.params.id)
},
subcontent: function() {
return this.content.subcontent;
}
But I also have an action in this page to delete it. When the user clicks this button, I need to:
call the server and update the state with the result
redirect to the index: /pages
// 1
const serverCall = async () => {
const remainingPages = await mutateApi({
name: 'deletePage',
params: {id}
});
this.$store.dispatch('applications/updateState', remainingPages)
}
// 2
const redirect = () => {
this.$router.push({
path: '/pages'
});
}
Those two actions happen concurrently and I can't orchestrate those correctly:
I get an error TypeError: Cannot read property 'subcontent' of undefined, which means that the page properties are recalculated before the redirect actually happens.
I tried:
await server call then redirect
set a beforeUpdate() in the component hooks to handle redirect if this.content is empty.
delay of 0ms the server call and redirecting first
subcontent: function() {
if (!this.content.subcontent) return redirect();
return this.content.subcontent;
}
None of those worked. In all cases the current page components are recalculated first.
What worked is:
redirect();
setTimeout(() => {
serverCall();
}, 1000);
But it is obviously ugly.
Can anyone help on this?
As you hinted, using a timeout is not a good practice since you don't know how long it will take for the page to be destroyed, and thus you don't know which event will be executed first by the javascript event loop.
A good practice would be to dynamically register a 'destroyed' hook to your page, like so:
methods: {
deletePage() {
this.$once('hook:destroyed', serverCall)
redirect()
},
},
Note: you can also use the 'beforeDestroy' hook and it should work equally fine.
This is the sequence of events occurring:
serverCall() dispatches an update, modifying $store.state.pages.
content (which depends on $store.state.pages) recomputes, but $route.params.id is equal to the ID of the page just deleted, so Array.prototype.find() returns undefined.
subcontent (which depends on content) recomputes, and dereferences the undefined.
One solution is to check for the undefined before dereferencing:
export default {
computed: {
content() {...},
subcontent() {
return this.content?.subcontent
👆
// OR
return this.content && this.content.subcontent
}
}
}
demo
I am trying to add an event listener to an Autodesk Forge viewer. This is an application built on React and this is the code I am trying:
const selectEvent = () => {
let viewer = window.NOP_VIEWER;
viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, (e) => {
setSelection(e.dbIdArray);
});
};
This runs perfectly when called from a button onClick:
<Button onClick={() => selectEvent()}>Add</Button>
However, I would like the event listener to turn on when the page is loaded, so I tried useEffect:
useEffect(() => {
let viewer = window.NOP_VIEWER;
if (viewer) {
selectEvent();
}
}, []);
Even after trying some modifications, I could not get it to work. Nothing happens, so I suspect the event listener never gets added. Looking around at other solutions, event listeners are usually loaded with useEffect, but I am not sure what I am doing wrong. Any tips would be appreciated!
edit: It does enter the if statement, as a console.log works
Some background (might be relevant):
The viewer is loaded from a useEffect
useEffect(() => {
initializeViewer(props);
}, []);
and the viewer can be accessed as shown in the code above.
Try some thing like this.
When ever change in viewer and viewer is available, then you register the event.
Deregister the event handler as return function to hook
useEffect(() => {
if (viewer) {
viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, (e) => {
setSelection(e.dbIdArray);
});
}
return () => { /* do the removeEventLister */ }
}, [viewer]);
Try this
NOP_VIEWER is a global variable to access the current Viewer
you need to remove the event listener after listening otherwise it will cause memory leak
useEffect(()=>{
NOP_VIEWER.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, (e) => {
setSelection(e.dbIdArray);
});
return()=>{NOP_VIEWER.removeEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, (e) => {
setSelection(e.dbIdArray);
}))}
},[])
or if it doesn't work
useEffect(()=>{
let viewer= window.NOP_VIEWER
viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, (e) => {
setSelection(e.dbIdArray);
});
},[])
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