We need to drop an external item and then update the schedule data accordingly to that change by calling setState but resourceHeader become empty as their templates don't render as a consequence
I've reproduced the bug in this stackblitz : https://stackblitz.com/edit/react-gzetyr
and here also a recorded screenshot demo showing it: https://i.imgur.com/wjT9APb.gifv
PS: i had to call forceUpdate inside a setTimeout after the setState call because strangly setState call alone wasn't enough to re-render the schedule.
Best Regards
i solved this issue by calling
this.scheduleObj.addEvent(droppedItemData);
as in creation-using-addevent-method example.
In that example addEvent call seems not having any effect on the schedule (no appointemnt added) by i found that when calling it in the onTreeDragStop (as in their external-drag-drop) after updating the droppedItemData with new matching data, it works, and later on , in the onActionBegin (as in their external-drag-drop) an event.requestType === 'eventCreate' will be returned and there i could make the backend update too.
We have validated the reported problem at our end and we suggest you to use the delayUpdate property to overcome the problem.
<ScheduleComponent ref={schedule => this.scheduleObj = schedule} delayUpdate={true} > </ScheduleComponent>
<TreeViewComponent ref={tree => this.treeObj = tree} delayUpdate={true} </ TreeViewComponent>
Sample: https://stackblitz.com/edit/react-scheduler-i268259-external-drag-and-drop-utku7n?file=index.js
Kindly try the above sample and get in touch with us If you would need any further assistance.
UG link(delayUpdate): https://ej2.syncfusion.com/react/documentation/common/how-to/resolve-react-template-issues/
Related
Live example https://snack.expo.dev/su1-U5DZc
If I swipe screens with buttons - everything okay, but if I swipe with gesture - screens shows twice. Why so? Does this setWtf(state.index);
const onTouchStart = (e, state, context) => {
console.log('onTouchStart: ' + state.index);
setWtf(state.index);
};
make index stored somewhere by reference and then get updated?
Yes it was due to setWtf(state.index);. There is a reported bug of render issue when updating state in their official git page.
They are saying to downgrade react-native-swiper to version 1.5.5
or you could follow other solutions mentioned here : Update the state breaks the slides
Without more information, it's impossible to pinpoint the exact cause of the problem you're experiencing, although it's conceivable that the problem is connected to the way your code handles touch events.
Your code is probably adjusting the value of state.index depending on the gesture when you swipe between screens, and then refreshing the screen display based on the value of state.index. The screen display may update twice if state.index is being updated by reference because the value is being modified twice: once by the gesture and once by the setWtf function.
Using a different variable to hold the current screen index and only updating the value of state.index when the user interacts with the buttons is one potential fix for this problem. This should prevent the screen from being displayed more than once and ensure that the value of state.index is only modified once.
It's important to keep in mind that the setWtf function you specified in your query could not be connected to the problem you're having. Without more information, it's difficult to say for sure whether this function is being used to update another state in your application.
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])
I am trying to hide an element 'GorillaSurfIn' after I click on it.
But also it should fire the 'setShouldGorillaSurfOut' to 'true'. The second part works, but after I added this function:
function hideGorillaSurfIn() {
let element = document.getElementById('gorilla-surf-in');
ReactDOM.findDOMNode(element).style.display =
this.state.isClicked ? 'grid' : 'none';
}
After I click, the code falls apart.
Once I click, the element should be hidden/removed till the next time the App restarts.
Here is the Code Sandbox Link for further explanation.
I am open to any solutions, but also explanations please, as I am still fresh in learning React.
I have changed your code a bit to make it work. You can make further changes according to your need. A few things that I would like to add: -
You should avoid using findDOMNode (in most cases refs can solve your problem) as there are certain drawbacks associated with findDOMNode, such as the react's documentation states "findDOMNode cannot be used with functional components".
I've used refs (forward ref in this case) to make it work.
GorillaSurfIn was called twice, so there were two Gorilla gifs on the screen with same IDs. Not sure if that was the intended behaviour but each element should have unique ID.
Check out the code sandbox.
Looks like React DnD expects draggable/droppable items to be siblings in order to work properly. If one of the items belongs to another parent I get "Expected to find a valid target." as soon as the drag over event fires (when the swap should trigger).
I tweaked an example from their docs in case anyone would like to try it out:
broken example: https://codesandbox.io/s/broken-feather-qf0f2?file=/src/Container.jsx
Tweaks are at the bottom. Note that the first card item is rendered separately from the remaining ones, in another div.
In order to trigger the error just drag & drop the first item into another one. Notice that if you drag & drop any other items they will work.
original example: https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_hooks_js/04-sortable/simple?from-embed=&file=/src/Container.jsx
Thank you!
Could be an issue with react-dnd.
Check out this issue https://github.com/react-dnd/react-dnd/issues/361
From the issue that I had, the hover handler was updating the table/grid too fast. It was setting the state of the items and I guess DnD applies a new target id, hence the error.
Try adding a debounce on the hover handler with trailing option set to true. The problem is that the component is updating too quickly and the target id that DnD is expecting, has already changed due to the state change. It may help to add some checks in there to make sure that the item is droppable as well.
Due to #DDT's answer, I managed to solve the problem I was experiencing.
In the useDrop function I was updating the table/grid too fast after the update function from immutability-helper.
So I added a state variable e.g. wasDragDropped with an useEffect hook on it.
I change the wasDragDropped variable when useDrag is finished, and then update the table/grid via functionality in the useEffect hook.
(using react-dnd 14.0.4 and react-dnd-html5-backend 14.0.2)
How to call back the effect operation when clicking the prev button using method or function with fullcalendar4 in react?
At present, I can only think of this way:
componentDidMount(){
document.querySelector('.fc-prev-button').addEventListener('click', e => {console.log(e)})
}
componentDidMount(){
document.querySelector('.fc-prev-button').addEventListener('click', e => {console.log(e)})
}
Looks like it works with React. Have you read some docs here about callbacks, or here specifically working with react and the underlying calendar's ref?
I've created a simple code sandbox that uses the callback style you try, and also using the API. Between the two, your method seems less recommended, but IMO is a little cleaner as it uses all the existing in-place UI, but is susceptible to being a little more brittle as the class names could potentially change, whereas using the API for next/prev these are calling methods directly so less likely to change.
I guess it depends a lot on what exactly you're trying to accomplish here, but what you have will "piggyback" off the button click, so if you're just trying to do something on the side it'll work.