solidjs / solidjs/solid-docs

Signal update not causing re-render

Ouverte
#1,009 3 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

good first issue help wanted
Langage dominant
MDX
Étoiles
292
Forks
361
Merge moyen
7 h 51 min
PR mergées (30 j)
1

Description

Describe the bug

This may be a me problem, but I am confused and imagine this is well above my understanding. I'm having trouble with a simple re-render when an onMount function changes a signal from false to true--in this case, used to signify that loading has finished. I have tinkered with a few things trying to get this app to work. It's a template using Colyseus + Phaser for a multiplayer server. I've added Solid JS to the front-end as per a previous, functioning app, and that's where all the trouble began!

This template is using parcel to bundle, and I've tried to maintain that, but it has been tricky integrating Solid. I've had to create
.babelrc file,
parcel.config.js file,
and update the tsconfig to
"jsx": "preserve",
"jsxImportSource": "solid-js/h" (in order to get it to stop screaming at me about a jsx-dev-runtime error)

In doing so, I've finally been able to get it to accept using Solid js, but now it's simply not rendering a signal change in the return's body.

Your Example Website or App

https://achreo.vercel.app

Steps to Reproduce the Bug or Issue
export default function App() {
    const [menu, setMenu] = createSignal<boolean>(false);
    onMount(() => {
        console.log(menu(), 'Current Menu');
        setMenu(true);
        console.log(menu(), 'Current Menu');
    });
    return (
        <div id="app">
            <Show when={menu()} fallback={<Puff color="gold"/>}>
                <div class='superCenter'>
                    <div>The Ascean</div>
                    <button>Enter Game</button>
                </div>
            </Show>
        </div>
    );
};

This is the smallest version of getting at what I'm talking about, it's simply not updating its render of the signal and reflecting that in the return.

the app above shows how it functions when it does work (this is a front-end only, single player version of the same concept I'm redesigning to incorporate a server for multiplayer)

Expected behavior

I expected it to update the rendering, but instead it remains stuck with it seeing the fallback of the Show component, a Puff from solid-spinner

Screenshots or Videos

https://github.com/user-attachments/assets/23b0900f-fdfc-4631-b6fb-70ab219a7558

Platform
  • OS: [e.g. macOS, Windows, Linux]
  • Browser: [e.g. Chrome, Safari, Firefox]
  • Version: [e.g. 91.1]
Additional context

Apologies if this is a known issue, I've been trying to get this to work for a couple days now and after running into multiple, fixable errors, this seems like one that's just above my head.

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par la fonction App et son utilisation de createSignal, onMount et Show, puis examinez les paramètres mentionnés de .babelrc, parcel.config.js et tsconfig. Reproduisez l’exemple minimal et comparez l’intégration de Solid avec l’application fonctionnelle liée ; c’est terminé lorsque vous avez identifié pourquoi le changement du signal ne met pas à jour la branche rendue.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
javascript, typescript
Domaine
build-system, frontend
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
À clarifier
Accessibilité débutants
25/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.