Trying to update a value at index in a store array, updates all elements
Hello everyone,
I'm sorry this is probably gonna be a bit long, I'm having a hard time trying to explain myself.
Here is my issue:
I'm working on an app using a context, and inside this context there is a store. I did like in the stores_context tutorial: I have a function that initializes a store, and returns it with some setter functions to update it. I have a useContext() function that returns the whole thing and it works.
The store contains an object that contains an array of objects, and I'd like to update an attribute of the object at an index of the array. But when I call the function, the value is updated at all indexes, it seems.
And this happens in the app only ; I have an unit test (with vitest) which calls exactly the same function, but it works fine and only the object at the right index is updated.
I put the (very simplified) code in an attached file, I hope it worked. It's the function "setAttributeAtIndex" that causes issues. I've been console.logging it, it's called only once with the right index, I'm logging the context before and after the setMyContext. Right after the call, all of the indexes have been updated 😢
I also tried to change my setters and use the produce function, but it did exactly the same.
I've been stuck on this for a while now, does anyone see something that I'm doing wrong? What should I do?
Thanks a lot for your attention, I wish you a nice day!
9 Replies
I also found something else, I don't know if it will help or make it worse:
In my unit tests, I also try to call the setObjectAtIndex function, like this:
context.setObjectAtIndex (mockObject, 0);
expect(context.myContext.myArray).toStrictEqual([
mockObject,
]);
=> Before this test, the array contained only one element, another mockObject, so it should be working.
=> The output of the test says, among other similar things:
- Symbol(solid-proxy): [Object],
+ Symbol(solid-proxy): [Circular],
But what would that mean? Any idea?
I must have done something terribly wrong here.
What bothers me is also the fact that everything was working fine when the store was global. But I wanted to change that to a context, and now I'm having those issues ðŸ«
I'd be eternally grateful if someone has any idea!
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Yes, the show is allowing me to have a loading state while i'm initializing my store, there are some async calls
Or did you mean that I should use Suspense instead?
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Seems to be better practice yes, thank you!!
Sadly it didn't fix my issue 😦
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
That's a very good idea.
I'll try that but it might take a while, I'll reach out when I have it! Thank you!
Hi, hope you had a nice weekend!
Alright, this is the codesandbox I made to try to reproduce the bug:
https://codesandbox.io/p/sandbox/jovial-fast-s7z0xs?file=%2Fsrc%2FApp.tsx&selection=%5B%7B%22endColumn%22%3A63%2C%22endLineNumber%22%3A12%2C%22startColumn%22%3A63%2C%22startLineNumber%22%3A12%7D%5D
I apologize, some things must have been handled very poorly, but the bug is there.
I must have done something stupid to have this bug, but honestly I don't know where to look anymore. Maybe you'll spot the mistake!
In my example, I just have two buttons, each one uses the context. On click on one button, the function "setAttributeAtIndex" in the context is called, with the right index, and is supposed to update the count value. I wish it would update only the one the user clicked, but it updates both counts, at both indexes.
jovial-fast-s7z0xs
CodeSandbox is an online editor tailored for web applications.
Maybe useContext isn't supposed to be called twice?