solidjs / solidjs/solid-docs

Signal update not causing re-render

オープン
#1,009 コメント 3 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

good first issue help wanted
主要言語
MDX
スター
292
フォーク
361
平均マージ
7時間 51分
マージ済み PR(30日)
1

説明

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.

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

App 関数と、そこでの createSignal、onMount、Show の使用方法から始め、次に、言及されている .babelrc、parcel.config.js、tsconfig の設定を確認します。最小限の例を再現し、Solid の統合をリンク先の動作するアプリと比較します。完了の条件は、signal の変更によってレンダリングされたブランチが更新されない理由を特定することです。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript, typescript
領域
build-system, frontend
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
25/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。