Solidjs: Implementing a Map in createStore does not trigger updates upon changes

As a beginner in solidjs, I might have missed something important. In the code snippet below, I am trying to understand an issue:

const [state, setState] = createStore({ items: new Map() }); // e.g. Map<number, string>

In a component, suppose I want to use a derived state of the store like this:

export const Overview = () => {
    const count = () => state.items.size;

    return (<div>{count()</div>);
};

I expected that if I add a new entry to the map, the count property would be automatically updated since I am using it as a dependency.

I tried using an array instead of a map and it worked correctly, displaying the expected values in the component.

Could someone guide me to the relevant section in the documentation or explain why a map is not working as expected but an array does?

Answer №1

When a signal notifies its subscribers of a value change, it is important to set a new value instead of just inserting a new item. In this case, the action may not be perceived as an update. To rectify this, create a new map and transfer the inserted values into the new map by cloning the old one.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What methods can be used to configure Jasmine to read individual Vue component files?

I recently installed Jasmine and Vue through npm, but I'm encountering an issue when trying to import the Vue component itself, which is a .vue file. It seems to be having trouble reading the template section enclosed within <template></templ ...

Issue with Vue 3: Composition API does not support Array of refs

Check out the code snippet below. <template> <div v-for="item in arr" :key="item">{{ item }}</div> </template> <script> import { ref } from "vue"; export default { name: "TestArr", ...

What sets Gulp-Browserify apart from regular Browserify?

After switching from Grunt to Gulp recently, I find myself still learning the ropes. Can anyone shed some light on the distinction between using Gulp-Browserify versus just Browserify? I've heard that Gulp-Browserify has been blacklisted and seen som ...

Personalized payment fields: Revealing/concealing data using a selector

Following this successful solution: // Incorporating an external jQuery/JS file function cfields_scripts() { // IMPORTANT NOTE: // When using a child theme, replace get_template_directory_uri() with get_stylesheet_directory_uri() // Place th ...

JavaScript's setTimeout function seems to be executing an excessive number of times

After creating a loop with the setTimeout function, I encountered an issue where it would call itself after the 2nd or 3rd step because it started executing twice simultaneously. Here is how my function looks: var value = 70, intervalID = null; func ...

I'm curious about the Next.js type that corresponds to the Redirect object

It's possible to set up redirection in Next.js by configuring it like this: module.exports = { async redirects() { return [ { source: '/about', destination: '/', permanent: true, }, ] ...

There is an issue with the Svelte TypeScript error related to the $: syntax, specifically stating that a declaration cannot be used in a

I encountered an issue where I am receiving the error message "Cannot use a declaration in a single-statement context" while using $: syntax in a script with lang="ts" within my +page.svelte file. Additionally, when I check the version control system (VCS) ...

Using Tailwind classes as a prop functions correctly, however, it does not work when directly applied

Here's a component snippet I'm working on: export const TextInput = ({ label, wrapperClassName = "", inputClassName = "", labelClassName = "", placeholder = "", ...props }: InputProps & Fiel ...

Issue with Vuex store not being updated when called from promise resolution

I am facing an issue with my Vue.js application where I have an array called items bound to a Vuex data store and exposed as a computed property using the mapGetters helper. In the created() hook of the component, I make a REST API call to update this arra ...

Encountering a TypeError when using Webpack and ts-loader to bundle a third-party library

While everything compiles and bundles successfully, a TypeError is encountered in the browser: "box2dweb_commonjs_1.default is undefined." No errors occur when starting webpack-dev-server and reviewing the bundle at http://localhost:8080/webpack-dev-serv ...

Display or conceal image based on date

I'm interested in showing a unique zodiac sign image on my website according to the date of the year. For instance, from March 21st to April 21st, I want to display the "Aries" image; from April 22nd to May 21st, I want to show the "Taurus" image, and ...

Customizing CSS for displayed MDBootrap components

I am currently using MDBoostrap, a styling tool similar to Bootstrap, in my React application. I have a select element that is coded like so: <div> <select id="Regions" style={errorSelect} value={this.state.userRegionId} onChange={this.handle ...

Unselecting a line will result in the disabling of all chart lines

Currently, I am working with Primeng and incorporating multiple charts into my view. One feature of Primeng that I have successfully implemented is disabling lines. I am following this particular example: Primeng provides a handy function on their site: ...

Troubleshooting: Vee-validate useResetForm not functioning properly during submission in Vue 3 with Typescript

I've been struggling to reset form data after submission, and it seems like the useResetForm hook isn't working as expected. Code Section <script setup lang="ts"> import CircularProgress from "@/components/CircularProgress. ...

Animating a JQuery Slider using code from scratch

I'm attempting to dynamically alter/animate a JQuery slider. In this scenario, there are two arrays present: one for the values that need to be modified and another for the durations between modifications. By monitoring the console, you'll observ ...

How to position an absolute element beneath a fixed element

My website is experiencing a problem where the fixed header is overlapping an absolute paragraph on this page. Does anyone know how to resolve this issue? ...

Transforming JSON arrays into object representations

I have a collection of components structured like this: var names = 1)"lat: 40.6447077, lng: -73.878421, address: 1600 Pennsylvania Avenue, Brooklyn, NY 11239, USA" 2)"lat: 40.609099, lng: -73.931516, address: 2015 E. 35th street, Brooklyn, Ny, Un ...

How can you limit a type reference to a specific file in TypeScript?

Currently, I am working on writing universal JavaScript code that can be used in both Node and browser environments. While most of the code works independent of the environment, there are certain parts where different implementations are required based on ...

Unable to adjust the width of the react-select component

I've been struggling to adjust the width of the select element but no matter what I try, it remains at a default width of about 75px. const CustomContainer = styled('div')` width: 100%; height: 100%; display: flex; flex-flow: row wr ...

Adjusting iframe height dynamically across domains using Jquery

Can this task be accomplished using jQuery alone without using any bulky plugins? While I am aware of the numerous plugins and alternatives available, I am looking for the shortest, most robust, and cleanest solution (ideally utilizing jQuery). Feel free ...