Comments (6)
Alright, thanks for the reply @Clonkex :) . I did find a super janky workaround I think, where I changed the type of the value I keep in the reactive state to a string instead of an array: https://jsfiddle.net/09Lwopqy/
function getLoginComponent() {
const state = reactive({
pageDatas: "[]",
});
setTimeout(async () => {
state.pageDatas = JSON.stringify(JSON.parse(state.pageDatas).push(Date.now()))
}, 500);
return html`<div>bob</div>`;
}
From limited testing this at least solved my issue for now, and while it's definitely not a good solution, it let me keep working on the other problems in my app until hopefully a better solution comes along :P
from arrow-js.
I've run into the same issue just now. Did you ever found a solution/workaround @Clonkex ?
from arrow-js.
@Aidenir Unfortunately my "solution" was to switch to Preact + HTM (which is relatively easy to achieve even with an existing ArrowJS codebase because the ArrowJS and HTM syntax is similar - it's also still fully clientside, no build step necessary). It's not quite as elegant as ArrowJS in some ways (in particular, it took me a while to get my head around state handling - having to set an entirely new copy of the object when anything changes feels jank, but also potentially simpler and more reliable) but in other ways it's simpler and has the significant benefit of being battle-tested. If you make the same switch, just know that when you're trying to understand some Preact feature, search for React first because Preact is basically just a reimplementation of React.
So yeah, I was unable to work around this problem and it was enough to make me suffer the pain of learning Preact instead.
from arrow-js.
Alright, thanks for the reply @Clonkex :) . I did find a super janky workaround I think, where I changed the type of the value I keep in the reactive state to a string instead of an array: https://jsfiddle.net/09Lwopqy/
function getLoginComponent() { const state = reactive({ pageDatas: "[]", }); setTimeout(async () => { state.pageDatas = JSON.stringify(JSON.parse(state.pageDatas).push(Date.now())) }, 500); return html`<div>bob</div>`; }From limited testing this at least solved my issue for now, and while it's definitely not a good solution, it let me keep working on the other problems in my app until hopefully a better solution comes along :P
There are things wrong with this code and the code above it:
setTimeout
doesn't take awaitable functions, remove the async in front of the lambda- You shouldn't set your
reactive
variable to an object that has one propertypageDatas
, just use the array directly and it should work fine
Try this: const pageTimestamp = reactive([])
Then you should be able to use it like this: pageTimestamp.push(Date.now())
Also, the naming of the variable to state
doesn't describe what you are using it for and pageDatas
is also poorly named as it looks to be timestamps. If you need to keep state
then you would need to spread the array, as only the object changes are being tracked, so changing the child array directly will never trigger the change event.
Here is how keeping the object would work: state.pageTimestamps = [...state.pageTimestamps, Date.now()]
Please note that using the object will cause additional rerendering if any other properties are attached to that object. That is why I first recommended making the array reactive.
from arrow-js.
@jfftck You're reading too much into my testing code haha. It was cut down from real code and I didn't rename some things.
setTimeout
doesn't take awaitable functions, remove the async in front of the lambda
Well in my original code the lambda await
ed some stuff, which is why the async
is there. I just forgot to remove it. It also makes no difference to setTimeout
whether the function is awaitable or not; if the lambda await
s anything it needs to be marked as async
.
You shouldn't set your
reactive
variable to an object that has one propertypageDatas
, just use the array directly and it should work fine
It's been a while, but I believe I tried this and it made no difference. Or maybe it did make a difference but I couldn't do that because my real state was more complex and had multiple fields.
from arrow-js.
But your problem of circular loop can be fixed by splitting your state, anything that is for the component directly should be separate from the state for the children. Having it as 1 shared state can cause any changes to rerender both components.
from arrow-js.
Related Issues (20)
- Component from the DOM HOT 7
- TypeScript type for nested, optional reactive objects is broken HOT 1
- FYI: textarea behavior is very funky if you try to put HTML inside it rather than using the 'value' attribute HOT 2
- [Question] Are there ways to integrate with hyperscript interfaces? HOT 4
- Script throwing "Illegal Invocation" when adding an object to a reactive array HOT 2
- How does watch function work? HOT 2
- Cross-Site Scripting Vectors (XSS) HOT 5
- Dark mode flashbang 🫣 HOT 1
- Rewrite a reactive property which has $on event throw error
- [bug] Docs navigation indicator is bugged scrolling past "Getting Started" HOT 1
- Element property syntax not working HOT 1
- Map, Set, WeakMap, WeakSet can't be wrapped successfully HOT 4
- Nested template being called unexpectedly HOT 2
- Array of text boxes without a good key? HOT 2
- Poor performance? HOT 1
- What are the rules for `reactive`? Can I use es2015 classes in my "state" HOT 4
- Binding reactively to array length HOT 2
- How to unwatch HOT 2
- Can it support the CommonJS
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from arrow-js.