Как вы можете сделать переменные Svelte, которые зависят от параметров, реактивными?

Я пытаюсь выяснить маршрутизацию и отзывчивость в Svelte. У меня очень простая настройка REPL: https://svelte.dev/repl/e366816d12d04fb4ac982b7c37058655?version=3.47.0

мой файл приложения определяет мои маршруты. Я просто хочу каждый раз передавать имя состояния в путь. Это прекрасно работает.

        <script>
            import Router from 'svelte-spa-router';
            import State from './State.svelte'
            
            const routes = {
              "/state/:stateName": State,
            }
        </script>

        <ul>
            <li><a href="/#/state/California">California</a></li>
            <li><a href="/#/state/Idaho">Idaho</a></li>
            <li><a href="/#/state/Montana">Montana</a></li>
            <li><a href="/#/state/Oregon">Oregon</a></li>
            <li><a href="/#/state/Washington">Washington</a></li>
        </ul>

        <Router {routes}/>

В State.svelte я экспортирую параметры, чтобы распечатать имя штата, которое я передал. Однако я также хочу показать некоторые другие данные.

Как я это настроил сейчас, currentPop отображается правильно, когда я нажимаю на первый штат, но затем, когда я нажимаю на другие штаты, это число населения остается прежним. Как я могу обновить свой код, чтобы население реагировало? Спасибо!

            <script>
                export let params;
                import * as d3 from "d3";

                let states = [{"ID State":"04000US06","State":"California","ID Year":2019,"Year":"2019","Population":39512223,"Slug State":"california"},{"ID State":"04000US16","State":"Idaho","ID Year":2019,"Year":"2019","Population":1787065,"Slug State":"idaho"},{"ID State":"04000US30","State":"Montana","ID Year":2019,"Year":"2019","Population":1068778,"Slug State":"montana"},{"ID State":"04000US41","State":"Oregon","ID Year":2019,"Year":"2019","Population":4217737,"Slug State":"oregon"},{"ID State":"04000US53","State":"Washington","ID Year":2019,"Year":"2019","Population":7614893,"Slug State":"washington"}]

                let currentState, currentPop;

                for(i=0;i<states.length;i++){
                    currentState = states.filter((d) => d.State == params.stateName);
                        currentPop = currentState[0].Population;
                }
                
            </script>
            <p>
                the great state of {params.stateName}
            </p>

            2019 population: {currentPop}
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
0
0
34
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Просто сделайте часть обновления отзывчивый с помощью $:

$: for(i=0;i<states.length;i++) { //...

Svelte будет отслеживать зависимости оператора/блока и выполнять его снова, если какая-либо из зависимостей изменится.


Код может быть упрощено до этого, кстати:

$: currentState = states.find((d) => d.State == params.stateName);
$: currentPop = currentState.Population;

Потрясающие. спасибо!

sprucegoose 23.04.2022 17:39

Другие вопросы по теме